/* eslint-disable @typescript-eslint/no-unused-vars */
import styles from "./enquiries.module.scss";
import {
  CaretDownOutlined,
  DeleteTwoTone,
  DownOutlined,
  FilterOutlined,
  FilterTwoTone,
  SearchOutlined,
  SettingFilled,
} from "@ant-design/icons";
import { FC, useEffect, useState } from "react";
import MediaQuery from "react-responsive";
import { Button, Input, Select, Skeleton, Space, Spin, Table } from "antd";
import { useRouter } from "next/router";
import { getEnquiriesData } from "./enquiriesData";
import type { ColumnsType, TableProps } from "antd/es/table";
import Link from "next/link";
import cx from "classnames";
import * as commonApi from "../../../pages/api/common";
import { baseUrl } from "../../../constants/urls";
import EditEnquiries from "./EditEnquiries";
import moment from "moment";
import { title } from "process";

const Enquiries: FC<any> = () => {
  const [searchText, setsearchText] = useState("");
  const [selectedCategory, setSelectedCategory] = useState(0);
  const [category, setCategory] = useState([]);
  const [enquiryList, setEnquiryList] = useState<getEnquiriesData[]>([]);
  const router = useRouter();
  const [token, setToken] = useState("");
  const antIcon = <SettingFilled style={{ fontSize: 24 }} spin />;
  const [dataloading, setDataLoading] = useState(false);
  const [isEditDetails, setisEditDetails] = useState(false);
  const [loginRes, setLoginRes] = useState<any>({});
  const [searchVal, setSearchVal] = useState("");
  const [detailsData, setDetailsData] = useState<any>({});
  const [isLoading,setIsLoading] = useState(false);

  const columns: ColumnsType<getEnquiriesData> = [
    {
      title: "Id",
      key: "index",
      render: (value, item, index) => {
        return index + 1;
      },
      responsive: ["sm"],
    },
    {
      title: "Customer Name",
      dataIndex: "customerName",
      key: "customerName",
      sorter: (a: any, b: any) => a?.first_name.localeCompare(b?.first_name),

      render: (text, object: any, index) => {
        return `${object?.first_name}` +" "+ `${object?.last_name}`;
      },
    },
    {
      title: "Created At",
      dataIndex: "created_at",
      key: "created_at",
      sorter: (a: any, b: any) =>
      moment(a.created_at).format("DD-MM-YYYY") &&
          moment(a.created_at).format("DD-MM-YYYY") >
          moment(b.created_at).format("DD-MM-YYYY") &&
          moment(b.created_at).format("DD-MM-YYYY")
          ? 1
          : -1,

      render: (text, object: any, index) => {
        return moment(object?.created_at).format("DD-MM-YYYY");
      },
    },
    {
      title: "Type",
      dataIndex: "type",
      render: (text, object: any, index) => {
        return object.type == 1
          ? "Product Enquiry"
          : object.type == 2
          ? "Seller Enquiry"
          : "Other";
      },
    },

    {
      title: "Action",
      dataIndex: "",

      render: (record) => (
        <Space size="middle" className={cx(styles.actionContainer)}>
          <Button type="primary" ghost onClick={()=>{EditQuotePage(record)}}>
            Edit/Chat
          </Button>
          {/* <Button
            className={cx(styles.deleteSpan)}
            // onClick={() => handleDelete(record.id)}
          >
            <DeleteTwoTone
              style={{ fontSize: "1.2em" }}
              twoToneColor="#F3465F"
            />
          </Button> */}
        </Space>
      ),
    },
  ];

  useEffect(() => {
    setIsLoading(true);
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
  
    setLoginRes(details);
    commonApi
      .getRequestWithToken(
        `${baseUrl}/api/enquiries-list?token=true`,
        details?.token
      )
      .then((res) => {
        setIsLoading(false);
        setEnquiryList(res?.data?.data);
        
      });
  }, []);

  const EditQuotePage = (data:any) =>{
    
    setDetailsData(data);
    setTimeout(() => {
        setisEditDetails(true)
    }, 10);
  }

  const searchFunction=(valSeaarch:any)=>{
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    commonApi
      .getRequestWithToken(
        `${baseUrl}/api/enquiries-list?token=true&search=${valSeaarch}`,
        details?.token
      )
      .then((res) => {
        setIsLoading(false);
        setEnquiryList(res?.data?.data);
        
      });
  }
  const customerType=(type:number)=>{
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    commonApi
      .getRequestWithToken(
        `${baseUrl}/api/enquiries-list?token=true&search=${searchVal}&type=${type}`,
        details?.token
      )
      .then((res) => {
        setIsLoading(false);
        setEnquiryList(res?.data?.data);
        
      });
  }
  return (
    <>
      {!isEditDetails?<div className={styles.enquiryContainer}>
        <h1 className={styles.h1Styles}>Enquiry</h1>
        <MediaQuery minWidth={769}>
          <Space size="middle">
            <Input
              placeholder="Search"
              style={{ width: 240 }}
              suffix={<SearchOutlined />}
              size="large"
              onChange={(e) => {setSearchVal(e.target.value),searchFunction(e.target.value)}}
            />

            <div className={styles.inputGroupMain}>
              <Select
                value={selectedCategory}
                placeholder="Select Type"
                optionFilterProp="children"
                className={styles.searchDropdown}
                onChange={(value) => {setSelectedCategory(value),customerType(value)}}
                suffixIcon={<CaretDownOutlined className="ant-select-suffix" />}
              >
                <Select.Option value={0} key={""}>
                  Type
                </Select.Option>
                <Select.Option value={1} >
                Product Enquiry
                </Select.Option>
                <Select.Option value={2} >
                Seller Enquiry
                </Select.Option>
               
              </Select>
            </div>
            {/* <Button type="primary" ghost className={cx(styles.filterSpan)}>
              Filter <FilterOutlined twoToneColor="#291C61" />
            </Button> */}
          </Space>
          {isLoading ? (
           <Skeleton/>
          ) : (
            <div className={styles.listContainer}>
              <Table
                columns={columns}
                dataSource={enquiryList}
                // onChange={onChange}
                size="small"
               
                rowKey={(record) => record.id}
              />
            </div>
          )}
        </MediaQuery>

        <MediaQuery maxWidth={768}>
          <Space
            direction="vertical"
            size="middle"
            style={{ display: "flex", margin: "1em" }}
          >
            <Input
              placeholder="Search"
              style={{ width: "100%" }}
              suffix={<SearchOutlined />}
              size="large"
            />
            <div className={cx(styles.inputGroupMain,"my-2")}>
              <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>
          <Table
            columns={columns}
            dataSource={enquiryList}
            rowKey={(record) => record.id}
            pagination={false}
            // onChange={onChange}

            // expandable={{
            //   expandedRowRender: (record) => {
            //     if (record.id == record.id) {
            //       return (
            //         <Table
            //        columns={nestedColumns}
            //         dataSource={enquiryList.filter((e) => e.id == record.id)}
            //           rowKey={(record) => record.id}
            //           pagination={false}
            //         />
            //       );
            //     } else {
            //       return <></>;
            //     }
            //   },
            // }}
          />
        </MediaQuery>
      </div>:<EditEnquiries details={detailsData}/>}
    </>
  );
};

export default Enquiries;