import cx from "classnames";
import {
  Button,
  Dropdown,
  Form,
  Image,
  Input,
  Menu,
  message,
  notification,
  Popconfirm,
  Select,
  Skeleton,
  Space,
  Spin,
  Table,
} from "antd";
import type { ColumnsType, TableProps } from "antd/es/table";
import { RiDeleteBin5Line } from "react-icons/ri";
import {
  CaretDownOutlined,
  DeleteTwoTone,
  DownOutlined,
  FilterOutlined,
  FilterTwoTone,
  SearchOutlined,
  SettingFilled,
} from "@ant-design/icons";
import { FC, useContext, useEffect, useState } from "react";
import MediaQuery from "react-responsive";
import Router, { useRouter } from "next/router";
import axios from "axios";
import _ from "lodash";
import { warranty, warrantyMockData } from "../../enquiry/warrantyModel";
import styles from "./manageWarranty.module.scss";
import Link from "next/link";
import React from "react";
import * as CommonApi from "../../../pages/api/common";
import * as AddToCardApi from "../../../pages/api/addTocart";
import * as CartApi from "../../../pages/api/cart";
import { baseUrl, s3BucketUrl } from "../../../constants/urls";
import InternalPageHeader from "../../internalPageHeader/InternalPageHeader";
import shopConetxt from "../../../context/shopConetxt";


const ManageWarranty: FC<any> = () => {
  const { setCartItems } =
  useContext(shopConetxt);
  const [searchText, setsearchText] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("Category");
  const [category, setCategory] = useState([]);
  const [data, setData] = useState<any>([]);
  const router = useRouter();
  const [token, setToken] = useState("");
  const antIcon = <SettingFilled style={{ fontSize: 24 }} spin />;
  const [dataloading, setDataLoading] = useState(false);
  const [searchVal, setSearchVal] = useState("");
  const [productInvoice, setProductInvoice] = useState<any>({});
  const [isLoader,setIsLoader] = useState(false);
  useEffect(() => { 
    setIsLoader(true);
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    const token: any = !_.isEmpty(details) ? details.token : null;
    setToken(token);
    CommonApi.getRequestWithToken(`${baseUrl}/api/get-orders?token=true`,token).then((res)=>{
      setIsLoader(false);
      setData(res?.data?.data);
    })
  }, []);

  const columns: ColumnsType<warranty> = [
    {
      title: "S.NO",
      key: "index",
      render: (value, item, index) => {
        return index + 1;
      },
      responsive: ["sm"],
    },
    {
      title: "Image",
      dataIndex: ["productId"],
      key: "product_id",
      render: (text, image:any) => {
        return (
          <Link href={`/products/details/${image["url_key"]}`}>
            <a>
              <img
                src={`${s3BucketUrl}${image.base_image}`}
                alt="image"
                style={{ maxHeight: "50px", maxWidth: "50px",border:"1px solid #EFEFEF" }}
              />
            </a>
          </Link>
        );
      },
    },
    {
      title: "Product Code",
      dataIndex: "name",
      render: (record) => {
        return <a className={styles.text}>{record}</a>;
      },
    },
    {
      title: "Brand",
      dataIndex: "brand_name",
      render: (key,record:any) => {
        return <a className={styles.text} onClick={()=>{redirectBrand(record)}}>{record?.brand_name}</a>;
      },
    },
    {
      title: "Purchase as on",
      dataIndex: "order_date",
      render: (record) => {
        return <a className={styles.text}>{record}</a>;
      },
    },
    {
      title: "Expired on",
      dataIndex: "expiry_date",
      render: (record) => {
        return <a className={styles.expiry}>{record}</a>;
      },
    },
    {
      title: "Action",
      dataIndex: "",
      responsive: ["sm"],
      render: (key,record) => (
        <Space size="middle" className={cx(styles.actionContainer)}>
          <Button type="primary" onClick={()=>{buyNow(record)}}>
            Buy Again
          </Button>
        </Space>
      ),
    },
  ];

  const redirectBrand=(brand:any)=>{
    console.log(brand);
    router.push({
      pathname: `/products/1`,
      query: {
        brand: brand.brand_name,
        brandId: brand.brand,
        url: brand.brand_logo,
      },
    });
    

  }
  const nestedColumns: ColumnsType<any> = [
    {
      title: "Action",
      dataIndex: "",
      render: (record) => (
          <Button type="primary">
            Buy Again
          </Button>
      ),
    }
  ];

  const buyNow=(item:any)=>{
    
    const params = {
      product_id: item.additional.product_id,
      quantity: 1,
      token: token,
      mp_seller_id: item.additional.mp_seller_id,
      vendor_id: item.additional.vendor_id,
      shipping_type: 0,
    };

    AddToCardApi.addToCart(params).then((res) => {
      if (res?.message) {
        notification.open({
          message: res?.message,
          duration: 1,
        });
        
        CartApi.cartFetch(token).then((cartRes) => {
          if (cartRes.data !== null) {
            setProductInvoice(cartRes.data);
            setCartItems(cartRes.data);
            router.push("/cart");
            <InternalPageHeader item={cartRes.data.items.length} />;
          }
        });
      } else {
        notification.error({
          message: res?.error,
          duration: 0,
        });
      }
    });
  }

  return (
    <>
      <div className={cx(styles.myQuotataionContainer)}>
        <h1 className={styles.h1Styles}>Manage Warranty Products</h1>
        <MediaQuery minWidth={769}>
          <Space size="middle">
            <Input
              placeholder="Search"
              style={{ width: 240 }}
              suffix={<SearchOutlined />}
              size="large"
              onChange={(e) => setSearchVal(e.target.value)}
            />

            <div className={styles.inputGroupMain}>
              <Select
                value={selectedCategory}
                placeholder="Select Category"
                optionFilterProp="children"
                className={styles.searchDropdown}
                onChange={(value) => setSelectedCategory(value)}
                suffixIcon={<CaretDownOutlined className="ant-select-suffix" />}
              >
                <Select.Option value={"Category"} key={"Category"}>
                  Category
                </Select.Option>
                {category.map(({ id, name, slug }) => (
                  <Select.Option value={id} key={id}>
                    {name}
                  </Select.Option>
                ))}
              </Select>
            </div>
            <Button type="primary" ghost className={cx(styles.filterSpan)}>
              Filter <FilterOutlined twoToneColor="#291C61" />
            </Button>
          </Space>
          {dataloading ? (
            <div
              style={{
                maxWidth: "100%",
                marginLeft: "40%",
              }}
              className={styles.listContainer}
            >
              <Spin indicator={antIcon} tip="Loading..." />
            </div>
          ) : (
            <div className={styles.listContainer}>
              {isLoader?<Skeleton/>:<Table
                columns={columns}
                dataSource={data}
                size="small"
                rowKey={(record) => record.serialNumber}
              />}
            </div>
          )}
        </MediaQuery>

        <MediaQuery maxWidth={768}>
          <Space
            direction="vertical"
            size="middle"
            style={{ display: "flex", margin: "1em 1em" }}
          >
            <Input
              placeholder="Search"
              style={{ width: "100%" }}
              suffix={<SearchOutlined />}
              size="large"
            />
            <div className={styles.inputGroupMain}>
              <div>
                <Select
                  value={selectedCategory}
                  placeholder="Select Category"
                  optionFilterProp="children"
                  className={styles.searchDropdown}
                  onChange={(value) => setSelectedCategory(value)}
                  suffixIcon={
                    <CaretDownOutlined className="ant-select-suffix" />
                  }
                >
                  <Select.Option value={"Category"} key={"Category"}>
                    Category
                  </Select.Option>
                  {category.map(({ id, name, slug }) => (
                    <Select.Option value={id} key={id}>
                      {name}
                    </Select.Option>
                  ))}
                </Select>
              </div>
              <div>
                <Button type="primary" ghost className={cx(styles.filterSpan)}>
                  Filter <FilterOutlined twoToneColor="#291C61" />
                </Button>
              </div>
            </div>
          </Space>
          {isLoader?<Skeleton/>:<Table
            columns={columns}
            dataSource={warrantyMockData}
            rowKey={(record) => record.serialNumber}
            size="small"
            expandable={{
              expandedRowRender: (record) => {
                if (record.productId == record.productId) {
                  return (
                    <Table
                      columns={nestedColumns}
                      dataSource={warrantyMockData.filter((e) => e.serialNumber == record.serialNumber)}
                      rowKey={(record) => record.serialNumber}
                      pagination={false}
                    />
                  );
                } else {
                  return <></>;
                }
              },
            }}
          />}
        </MediaQuery>
      </div>
    </>
  );
};
export default ManageWarranty;