import {
  Modal,
  Image,
  Checkbox,
  Radio,
  Space,
  Input,
  Button,
  RadioChangeEvent,
  Spin,
  notification,
} from "antd";
import { FC, useEffect, useState } from "react";
import styles from "./cancelOrder.module.scss";
import cx from "classnames";
import Slider from "react-slick";
import {
  RightOutlined,
  LeftOutlined,
  LoadingOutlined,
} from "@ant-design/icons";

import * as OrderApi from "../../../pages/api/getOrders";
import { s3BucketUrl,baseUrl } from "../../../constants/urls";
import *as CommonApi from "../../../pages/api/common";
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const CancelOrder: FC<any> = (props) => {
  const cancelOptions = [
    "Duplicate Order",
    "Cash Issue",
    "Ordered by mistake",
    " Delayed Delivery Cancellation",
    "Incorrect size ordered",
    " Product not required anymore",
  ];

  const {
    cancelModal,
    onCloseCancel,
    cancelOrderDetails,
    cancelCloseOrderModal,
  } = props;
  const [cancelButton, setCancelButton] = useState(false);
  const [loading, setLoading] = useState(false);
  const [value, setValue] = useState("");
  const [loginRes, setLoginRes] = useState<any>({});
  const [cancelReason, setCancelReason] = useState<any>([])

  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: false,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    speed: 400,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  function SampleNextArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          height: 20,
          width: 20,
          opacity: "1",
          right: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        {" "}
        <RightOutlined className={styles.iconRightDisplay} />
      </div>
    );
  }

  function SamplePrevArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          height: 20,
          width: 20,
          opacity: "1",
          left: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        <LeftOutlined className={styles.iconLeftDisplay} />
      </div>
    );
  }

  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
  };

  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    CommonApi.getRequest(`${baseUrl}/api/customisation/product-flag-reasons/cancel`).then((res)=>{
      
      setCancelReason(res?.data?.reasons)
    })

  }, []);

  const deleteOrder = () => {
    if(value==""){
      notification.error({message:"Please Select Cancel Reason"})
    }else{
    setCancelButton(true);
    setLoading(true);
    const params = {
      id: cancelOrderDetails?.id,
      reason: value,
      token: loginRes?.token,
    };
    OrderApi.deleteOrder(params).then((res) => {
       notification.success({message:res.message})
      setCancelButton(false);
      setLoading(false);
      onCloseCancel();
    });
  }
  };

  return (
    <>
      <Modal
        visible={cancelModal}
        width={800}
        style={{
          width: "823px",
          height: "100%",
          position: "absolute",
          right: 0,
          top: 0,
        }}
        onOk={cancelCloseOrderModal}
        onCancel={cancelCloseOrderModal}
        footer={null}
        destroyOnClose={true}
        bodyStyle={{ height: "100%", width: "100%" }}
      >
        <h2 className={styles.title}>
          {" "}
          Are you sure you want to Cancel the Order?
        </h2>
        <div className={styles.detailsContainer}>
          <div>
            <Slider {...slickSettings} className="py-6">
              {cancelOrderDetails?.items?.map((data: any, idx: number) => {
                return (
                  <div key={idx} className="mr-2">
                    <div className={"p-2"}>
                      <div className={styles.itemContainer}>
                        <Image
                          src={s3BucketUrl + data?.product?.base_image?.path}
                          className={styles.image}
                          preview={false}
                        />
                        <div className={cx(styles.contentContainer, "ml-4")}>
                          <h3 className={cx(styles.productName)}>
                            {data?.product?.name}
                          </h3>
                          <div className="ant-row">
                            <span className="ant-col-xl-12">
                              ₹{data?.product?.price}{" "}
                            </span>
                          </div>
                          <div className="ant-row">
                            <span>by</span>
                            <span>&nbsp;
                              {
                                data?.additional?.seller_info
                                  ?.manufacturer_label
                              }
                            </span>
                            <span>{data?.product?.qty_ordered}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </Slider>
          </div>
          <div className={cx("ant-col-sm-24 ant-col-xl-8")}>
            <div className={cx(styles.billContainer, "ant-row")}>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-12">
                Sub Total
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-12">
                {cancelOrderDetails?.formated_base_sub_total}
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-12">
                Discount
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-12">
                {cancelOrderDetails?.formated_base_discount_amount}
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-12">
                Taxable Amount
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-12">
                {cancelOrderDetails?.formated_base_tax_amount}
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-12">
                Total
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-12 fs-6">
                {cancelOrderDetails?.formated_grand_total}
              </div>
            </div>
          </div>
          <h3></h3>
          <Radio.Group onChange={onChange} value={value}>
            <Space direction="vertical" className="mt-5">
              {cancelReason.map((data: any) => {
                return (
                  <Radio key={data} value={data}>
                    {data}
                  </Radio>
                );
              })}
            </Space>
          </Radio.Group>
          <div className="my-5">
            <Button
              type="primary"
              ghost
              className="my-2 ml-2"
              block
              onClick={cancelCloseOrderModal}
              
            >
              No, I dont want to Cancel
            </Button>
            <Button
              type="primary"
              className="my-2 ml-2"
              block
              onClick={deleteOrder}
              disabled={cancelButton}
            >
              Yes, Cancel my Order
            </Button>
          </div>
        </div>
        <Spin indicator={antIcon} spinning={loading} className={styles.loaderContainer}/>
      </Modal>
    </>
  );
};

export default CancelOrder;