import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { useUpdateOne } from "../../Hooks/Update";
import {
  Form,
  Spin,
  Watermark,
  Space,
  Tabs,
  Row,
  Col,
  Input,
  Button,
  Select,
  Upload,
  Modal,
  notification,
} from "antd";
import { updateController } from "../../API/LayoutApi/update";
import {
  InfoCircleFilled,
  InfoCircleOutlined,
  UploadOutlined,
} from "@ant-design/icons";
import Notfound from "../../Utils/Notfound";
import { companyController } from "../../API/LayoutApi/companies";
import { customerController } from "../../API/LayoutApi/customers";
import { taskController } from "../../API/LayoutApi/tasks";
import TextArea from "antd/es/input/TextArea";
import { role } from "../../App";
// @ts-ignore
import infoIcon from "../../assets/infoIcon.png";
// @ts-ignore
import infoIconActive from "../../assets/infoIconActive.png";
// @ts-ignore
import attachmentIcon from "../../assets/attachmentIcon.png";
// @ts-ignore
import attachmentIconActive from "../../assets/attachmentIconActive.png";

import uploadImg from "../../assets/upload-file.png";

const { Option } = Select;
const TabPane = Tabs.TabPane;
type params = {
  readonly id: any;
};
type MyObjectType = {
  [key: string | number]: any;
};
const UpdateEdit = () => {
  const { id } = useParams<params>();
  const { data, refetch, status }: MyObjectType = useUpdateOne(id);
  const onSubmit = async (value: any) => {
    if (value.status === "Done") {
      if (value.solution !== "") {
        await updateController.updatePut(value, id);
        refetch();
        document.location.replace("/#/updates/");
      } else {
        notification.error({
          message: "Error",
          description: "Solution cannot be empty!",
        });
      }
    } else {
      await updateController.updatePut(value, id);
      refetch();
      document.location.replace("/#/updates/");
    }
  };
  const admin_id = localStorage.getItem("admin_id");
  const [companyId, setCompanyId] = useState<any>(null);
  const [companyValue, setCompanyValue] = useState<any>();
  const [companyData, setCompanyData] = useState<MyObjectType>();
  const [customerId, setCustomerId] = useState<any>(null);
  const [customerValue, setCustomerValue] = useState<any>();
  const [customerData, setCustomerData] = useState<MyObjectType>();
  useEffect(() => {
    if (data) {
      if (data.company_id === null) {
        setCompanyId(null);
      }
      if (data.customer_id === null) {
        setCustomerId(null);
      }
      const companyIdFromData = data.company_id;
      const customerIdFromData = data.customer_id;
      setCompanyId(companyIdFromData);
      setCustomerId(customerIdFromData);
    }
  }, [data]);
  useEffect(() => {
    if (companyId !== null) {
      companyController.companyOne(companyId).then((CompanyData) => {
        setCompanyData(CompanyData);
      });
    }
  }, [companyId]);
  useEffect(() => {
    if (customerId !== null) {
      customerController.customerOne(customerId).then((CustomerData) => {
        setCustomerData(CustomerData);
      });
    }
  }, [customerId]);

  useEffect(() => {
    if (companyData && companyData.name) {
      setCompanyValue(companyData.name);
    }
  }, [companyData]);
  useEffect(() => {
    if (customerData && customerData.name) {
      setCustomerValue(customerData.name);
    }
  }, [customerData]);

  const handleClickDelete = (id: any) => {
    if (id !== undefined) {
      taskController.deleteAttachmentController(id);
    }
  };

  const [inCharge, setInChage] = useState<any>();
  useEffect(() => {
    if (data?.in_charge_id) {
      setInChage(data.in_charge_id);
    }
  }, [data]);

  // const ClickDelete = () => {
  //   const shouldDelete = window.confirm(
  //     "Вы уверены, что хотите удалить эту задачу?"
  //   );
  //   if (shouldDelete && id !== undefined) {
  //     updateController.deleteUpdateController(id).then((data: any) => {
  //       document.location.replace(`/#/updates/`);
  //     });
  //   }
  // };

  const ClickDelete = () => {
    Modal.confirm({
      title: "Are you sure you want to delete this task?",
      okText: "Yes",
      okType: "danger",
      cancelText: "No",
      onOk() {
        if (id) {
          updateController.deleteUpdateController(id).then(() => {
            document.location.replace("/#/updates/");
          });
        }
      },
    });
  };
  const [imgname, setImgname] = useState<any>([]);
  function handlePaste(event: any) {
    // Обработка вставки из буфера обмена
    const clipboardData = event.clipboardData || window.Clipboard;
    if (clipboardData && clipboardData.items.length > 0) {
      const clipboardItem = clipboardData.items[0];
      if (clipboardItem.kind === "file") {
        const file = clipboardItem.getAsFile();
        const formData = new FormData();
        formData.append("file", file);
        formData.append("shift_update_id", id);
        // taskController.addTaskFile(formData).then((response) => {
        //   const n = [response.file];
        //   setImgname((prev: any) => [...prev, ...n]);
        // });
      }
    }
  }
  const [activeTab, setActiveTab] = useState("1");

  return (
    <div>
      {role !== "Checker" || inCharge == admin_id || inCharge == null ? (
        <Spin size="large" spinning={!data}>
          <Watermark style={{ height: "100%" }}>
            {status === "loading" ? (
              <Spin size="large" spinning={!data} />
            ) : data ? (
              <Spin size="large" spinning={!data}>
                <Space
                  direction="vertical"
                  size="middle"
                  style={{ display: "flex" }}
                >
                  <Tabs
                    defaultActiveKey="1"
                    activeKey={activeTab}
                    onChange={(key) => setActiveTab(key)}
                  >
                    <TabPane
                      tab={
                        <span style={{ display: "flex", alignItems: "center" }}>
                          <img
                            style={{ marginRight: 10 }}
                            src={activeTab === "1" ? infoIconActive : infoIcon}
                            alt=""
                          />
                          Information
                        </span>
                      }
                      key="1"
                    >
                      <Space
                        direction="vertical"
                        size="middle"
                        style={{ display: "flex" }}
                      >
                        <Form
                          name="newBasic"
                          layout="vertical"
                          wrapperCol={{ span: 16 }}
                          initialValues={{ ...data }}
                          autoComplete="off"
                        >
                          <Row gutter={[16, 10]}>
                            {companyId !== null && (
                              <Col span={8}>
                                <Form.Item
                                  wrapperCol={{ span: "100%" }}
                                  label="Company"
                                >
                                  {/* {data?.company.id !== undefined && (
                                    // <Input
                                    //   defaultValue={data?.company?.id}
                                    //   readOnly
                                    // />
                                  )} */}
                                  {data?.company?.id !== null && (
                                    <Input
                                      defaultValue={data?.company?.name || " "}
                                      readOnly
                                    />
                                  )}
                                </Form.Item>
                              </Col>
                            )}
                            {/* {customerId !== null && (
                              <Col span={8}>
                                <Form.Item
                                  wrapperCol={{ span: "100%" }}
                                  label="Driver"
                                >
                                  {data?.customer.id !== undefined && (
                                    <Input
                                      defaultValue={data?.customer?.name}
                                      readOnly
                                    />
                                  )}
                                </Form.Item>
                              </Col>
                            )} */}
                            {customerId !== null && (
                              <Col span={8}>
                                <Form.Item
                                  wrapperCol={{ span: "100%" }}
                                  label="Driver"
                                >
                                  <Input
                                    defaultValue={data?.customer?.name || ""}
                                    readOnly
                                  />
                                </Form.Item>
                              </Col>
                            )}
                          </Row>
                        </Form>
                        <Form
                          name="basic"
                          layout="vertical"
                          wrapperCol={{ span: 16 }}
                          initialValues={{ ...data }}
                          onFinish={onSubmit}
                          autoComplete="off"
                        >
                          <Row gutter={[16, 10]}>
                            <Col span={8}>
                              <Form.Item
                                wrapperCol={{ span: "100%" }}
                                label="Note"
                                name="note"
                              >
                                <TextArea />
                              </Form.Item>
                            </Col>
                            <Col span={8}>
                              <Form.Item
                                wrapperCol={{ span: "100%" }}
                                label="Solution"
                                name="solution"
                              >
                                <TextArea />
                              </Form.Item>
                            </Col>
                            <Col span={4}>
                              <Form.Item
                                wrapperCol={{ span: "100%" }}
                                label="Status"
                                name="status"
                              >
                                <Select style={{ width: 120 }}>
                                  <Option value="New">New</Option>
                                  <Option value="In Progress">
                                    In Progress
                                  </Option>
                                  <Option value="Done">Done</Option>
                                  <Option value="Paper">Paper</Option>
                                  <Option value="Setup">Setup</Option>
                                </Select>
                              </Form.Item>
                            </Col>
                          </Row>
                          <Form.Item>
                            {role !== "Chceker" && (
                              <Button
                                type="primary"
                                danger
                                onClick={ClickDelete}
                              >
                                Archived
                              </Button>
                            )}
                            <Button
                              style={{ margin: 10 }}
                              type="primary"
                              htmlType="submit"
                            >
                              Save
                            </Button>
                          </Form.Item>
                        </Form>
                      </Space>
                    </TabPane>
                    <TabPane
                      tab={
                        <span style={{ display: "flex", alignItems: "center" }}>
                          <img
                            style={{ marginRight: 10 }}
                            src={
                              activeTab === "2"
                                ? attachmentIconActive
                                : attachmentIcon
                            }
                            alt=""
                          />
                          Attachments
                        </span>
                      }
                      key="2"
                    >
                      <div
                        onPaste={(event) => handlePaste(event)}
                        style={{ height: 800, width: 1000 }}
                      >
                        <Space
                          direction="vertical"
                          size="middle"
                          style={{ display: "flex" }}
                        >
                          <Form
                            name="basicFuck"
                            layout="vertical"
                            wrapperCol={{ span: 16 }}
                            initialValues={{ ...data.attachment_set[0] }}
                            autoComplete="off"
                            onFinish={onSubmit}
                          >
                            <Row gutter={[16, 10]}>
                              <Col span={24}>
                                <Form.Item wrapperCol={{ span: "100%" }}>
                                  {data.attachment_set.map((item: any) => (
                                    <div
                                      style={{
                                        display: "flex",
                                        alignSelf: "center",
                                        alignItems: "center",
                                        justifyContent: "space-between",
                                        background: "rgb(239 239 239)",
                                        padding: 15,
                                        borderRadius: 8,
                                        marginBottom: 20,
                                      }}
                                      key={item.id}
                                    >
                                      <a
                                        style={{
                                          width: "20%",
                                          display: "flex",
                                          alignItems: "center",
                                          alignSelf: "center",
                                        }}
                                        href={item.file_path}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                      >
                                        <img
                                          src={item.file_path}
                                          alt=""
                                          style={{
                                            width: "30%",
                                            maxHeight: "200px",
                                            marginRight: 20,
                                          }}
                                        />
                                        {item.file_name}
                                      </a>
                                      <Button
                                        onClick={() =>
                                          handleClickDelete(item.id)
                                        }
                                        type="primary"
                                        danger
                                      >
                                        Delete
                                      </Button>
                                    </div>
                                  ))}
                                </Form.Item>
                                <Form.Item label="File" name="attachment">
                                  <Upload.Dragger
                                    name="file"
                                    customRequest={({
                                      file,
                                      onSuccess,
                                    }: any) => {
                                      const formData = new FormData();
                                      formData.append("file", file);
                                      formData.append("shift_update_id", id);
                                      // taskController
                                      //   .addTaskFile(formData)
                                      //   .then(() => {
                                      //     onSuccess();
                                      //   })
                                      //   .catch((error) => {
                                      //     onSuccess(error);
                                      //   });
                                    }}
                                  >
                                    <p className="ant-upload-drag-icon">
                                      <img src={uploadImg} alt="upload image" />
                                    </p>
                                    <p
                                      className="ant-upload-text"
                                      style={{ color: "#9B9DAA", fontSize: 14 }}
                                    >
                                      Drag and drop files or Click to select
                                    </p>
                                    <p
                                      className="ant-upload-text"
                                      style={{ color: "#9B9DAA", fontSize: 13 }}
                                    >
                                      Maximum file size is 10 MB
                                    </p>
                                  </Upload.Dragger>
                                  <p>{imgname.join(",\n")}</p>
                                </Form.Item>
                                <Form.Item>
                                  <Button type="primary" htmlType="submit">
                                    Save
                                  </Button>
                                </Form.Item>
                              </Col>
                            </Row>
                          </Form>
                        </Space>
                      </div>
                    </TabPane>
                  </Tabs>
                </Space>
              </Spin>
            ) : (
              <Notfound />
            )}
          </Watermark>
        </Spin>
      ) : (
        <div>
          <Spin size="large" spinning={!data}></Spin>
        </div>
      )}
    </div>
  );
};

export default UpdateEdit;
