import React, { useEffect, useState } from "react";
import type { FC } from "react";
import { Button, Card, Form, Row, Col, Select, Table, DatePicker } from "antd";
import { SearchOutlined, UndoOutlined } from "@ant-design/icons";
import "antd/dist/reset.css";
import "./App.css";
import axios from "axios";
import moment from "moment";

const columns = [
  { title: "Id", dataIndex: "id", ellipsis: true, width: "15px" },
  {
    title: "Date",
    dataIndex: "send_time",
    ellipsis: true,
    width: "15px",
    sorter: (a: any, b: any) =>
      moment(a.send_time).unix() - moment(b.send_time).unix(),
    render: (value: any) => moment(value).format("DD-MM-YY hh:mm a"),
  },
  {
    title: "Customer Name",
    dataIndex: "customer_name",
    ellipsis: true,
    width: "15px",
  },
  {
    title: "Mobile number",
    dataIndex: "mobile_no",
    ellipsis: true,
    width: "15px",
  },
  {
    title: "Request",
    dataIndex: "sender",
    ellipsis: true,
    width: "20px",
  },

  {
    title: "Response",
    dataIndex: "message",
    ellipsis: true,
    width: "40px",
  },
];

const App: FC = () => {
  const [data, setData] = useState<any>([]);
  const [vehicle, setVehicle] = useState<any>([]);
  const [mobile, setMobile] = useState<any>([]);

  const [form] = Form.useForm();
  const { Option } = Select;
  const { RangePicker } = DatePicker;

  const onReset = () => {
    form.resetFields();
  };

  const getData = () => {
    const date = form.getFieldValue("fromDate");
    const fromDate = date ? new Date(date[0]) : null;
    const toDate = date ? new Date(date[1]) : null;
    const req = {
      mobileNo: form.getFieldValue("mobileNumber"),
      fromDate: fromDate ? moment(fromDate).format("YYYY-MM-DD") : null,
      toDate: toDate ? moment(toDate).format("YYYY-MM-DD") : null,
      vehicle_model: form.getFieldValue("vehiclemodel"),
    };
    axios
      .post("http://localhost:5000/report/getReportData", req)
      .then((response: any) => {
        console.log(response);
        setData(response.data);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  const vehiclemodel = () => {
    axios
      .post("http://localhost:5000/report/vehicemodels")
      .then((response: any) => {
        console.log(response.data);
        setVehicle(response.data);
      });
  };

  useEffect(() => {
    vehiclemodel();
  }, []);

  const getmobile = () => {
    axios
      .post("http://localhost:5000/report/getmobilenumber")
      .then((response: any) => {
        console.log(response.data);
        setMobile(response.data);
      });
  };

  useEffect(() => {
    getmobile();
  }, []);

  return (
    <Card
      title={<span style={{ color: "white" }}>Report</span>}
      style={{ textAlign: "center" }}
      headStyle={{ backgroundColor: "black", border: 0 }}
    >
      <Form form={form}>
        <Row gutter={[24, 24]}>
          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 5 }}
            lg={{ span: 5 }}
            xl={{ span: 5 }}
            style={{ margin: "1%" }}
          >
            <Form.Item
              name="fromDate"
              label="Date"
              initialValue={undefined}
              rules={[
                {
                  required: false,
                  message: "Date",
                },
              ]}
            >
              <RangePicker />
            </Form.Item>
          </Col>
          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 5 }}
            lg={{ span: 5 }}
            xl={{ span: 5 }}
            style={{ margin: "1%" }}
          >
            <Form.Item
              name="vehiclemodel"
              label="Vehicle model"
              
            >
              <Select
                showSearch
                placeholder="Select Vehicle model"
                optionFilterProp="children"
                allowClear
              >
                {vehicle.map((data1: any) => {
                  return (
                    <Option
                      key={data1.id}
                      value={data1.model_name}
                    >{`${data1.model_name}`}</Option>
                  );
                })}

                {/* <Option value="Bajaj">Bajaj</Option>
          <Option value="KTM">KTM</Option> 
          <Option value="Husqvarna">Husqvarna</Option>
          <Option value="Chetak_ev">Chetak EV</Option> */}
              </Select>
            </Form.Item>
          </Col>

          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 5 }}
            lg={{ span: 5 }}
            xl={{ span: 5 }}
            style={{ margin: "1%" }}
          >
            <Form.Item
              name="mobileNumber"
              label="Mobile number"
              // rules={[
              //   {
              //     required: false,
              //   },
              //   {
              //     pattern: /^[0-9]*$/,
              //   },
              // ]}
            >
              <Select
                showSearch
                placeholder="Select Mobilenumber"
                optionFilterProp="children"
                allowClear
              >
                {mobile.map((data3: any) => {
                  return (
                    <Option
                      key={Math.random()}
                      value={data3.mobile_no}
                    >{`${data3.mobile_no}`}</Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>

          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 5 }}
            lg={{ span: 5 }}
            xl={{ span: 5 }}
            style={{ marginTop: 15 }}
          >
            <Button
              type="primary"
              icon={<SearchOutlined />}
              style={{ marginRight: 2, width: 100 }}
              htmlType="button"
              onClick={getData}
            >
              Search
            </Button>
            <Button
              type="primary"
              icon={<UndoOutlined />}
              htmlType="submit"
              onClick={onReset}
            >
              Reset
            </Button>
          </Col>
        </Row>
      </Form>
      <Table columns={columns} dataSource={data} />
    </Card>
  );
};

export default App;