import { TTask } from "../../types/Tasks/TTasks";
import {
  Button,
  Dropdown,
  MenuProps,
  Modal,
  Table,
  Tabs,
  Tooltip,
  theme,
} from "antd";
import TabPane from "antd/es/tabs/TabPane";
import { role, timeZone } from "../../App";
import { useTaskHistory } from "../../Hooks/Tasks";
import TextArea from "antd/es/input/TextArea";
import { useEffect, useState } from "react";
import { taskController } from "../../API/LayoutApi/tasks";
import { useTeamData } from "../../Hooks/Teams";
import { TTeam } from "../../types/Team/TTeam";
import {
  ArrowRightOutlined,
  CloseOutlined,
  DatabaseOutlined,
  EditOutlined,
  UploadOutlined,
} from "@ant-design/icons";

import ShiftAndCoDriverCreateModal from "./ShiftInfo/ShiftAndCoDriverCreateModal";

import { TSocket } from "../../types/common/TSocket";

import historyIcon from "../../assets/hisoryIcon.png";

import attachmentIcon from "../../assets/attachmentIcon.png";

import infoIcon from "../../assets/infoIcon.png";

import pdficon from "../../assets/pdficon.png";

import letssee from "../../assets/letssee.png";

import svgicon from "../../assets/svgicon.png";

import pngicon from "../../assets/pngicon.png";

import jpgicon from "../../assets/jpgicon.png";

import jpegicon from "../../assets/jpegicon.png";

import xlsicon from "../../assets/xlsicon.png";

import docicon from "../../assets/docicon.png";

import driverIcon from "../../assets/drivericon.png";

import userIcon from "../../assets/userIcon.png";

import ShiftDataTab from "./ShiftInfo/ShiftDataTab";

const TaskModal = ({
  modalOpen,
  setModalOpen,
  recordTask,
  setRecordTask,
  uploadOpen,
  setUploadOpen,
  socketData,
}: {
  recordTask: TTask | undefined;
  setRecordTask: React.Dispatch<React.SetStateAction<TTask | undefined>>;
  modalOpen: boolean;
  setModalOpen: any;
  uploadOpen: boolean;
  setUploadOpen: any;
  socketData: TSocket | undefined;
}) => {
  const moment = require("moment-timezone");
  const themes = localStorage.getItem("theme") === "true" ? true : false;
  const [text, setText] = useState<string | undefined>(recordTask?.note);
  const [pti, setPti] = useState<boolean | undefined>(recordTask?.pti);
  const [status, setStatus] = useState(recordTask?.status);
  const [teamName, setTeamName] = useState(recordTask?.assigned_to?.name);
  const { data, isLoading } = useTaskHistory(recordTask?.id);

  const [isModalOpen, setIsModalOpen] = useState(false);

  const { token } = theme.useToken();

  const handleCancel = () => {
    setModalOpen(!modalOpen);
  };
  const showUploadModal = () => {
    setUploadOpen(!uploadOpen);
  };

  function getFileType(fileName: any) {
    var fileExtension = fileName.split(".").pop()?.toLowerCase();

    switch (fileExtension) {
      case "jpg":
        return <img style={{ marginRight: 12 }} src={jpgicon} alt="" />;
      case "jpeg":
        return <img style={{ marginRight: 12 }} src={jpegicon} alt="" />;
      case "png":
        return <img style={{ marginRight: 12 }} src={pngicon} alt="" />;
      case "pdf":
        return <img style={{ marginRight: 12 }} src={pdficon} alt="" />;
      case "svg":
        return <img style={{ marginRight: 12 }} src={svgicon} alt="" />;
      case "xls":
        return <img style={{ marginRight: 12 }} src={xlsicon} alt="" />;
      default:
        return <img style={{ marginRight: 12 }} src={docicon} alt="" />;
    }
  }

  const teamData = useTeamData({});
  // const teamData = useCustomerData({name: "", page: 1, page_size: 100});
  const teams: MenuProps["items"] = teamData?.data?.map(
    (item: any, index: number) => ({
      key: item?.id,
      label: (
        <div
          style={{
            display: "flex",
            alignItems: "center",
          }}
        >
          <div
            style={{
              width: 10,
              height: 10,
              background: `rgb(${index * (255 / teamData?.data.length)}, ${
                255 - index * (255 / teamData?.data.length)
              }, 0)`,
              padding: 5,
              borderRadius: 5,
              marginRight: 10,
            }}
          ></div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              width: "100%",
            }}
          >
            <p>{item?.name}</p>
            <p style={{ marginLeft: 30 }}>{item?.task_count_percentage}%</p>
          </div>
        </div>
      ),
      onClick: () => teampatch(item),
    })
  );
  const items: MenuProps["items"] = [
    {
      key: "1",
      label: <p>New</p>,
      onClick: () => statuspatch("New"),
    },
    {
      key: "2",
      label: <p>Checking</p>,
      onClick: () => statuspatch("Checking"),
    },
    {
      key: "3",
      label: <p>Done</p>,
      onClick: () => {
        if (status === "Done") {
          statuspatch("Done");
          return;
        }

        if (
          recordTask?.service.title === "Break" ||
          recordTask?.service.title === "PTI"
        ) {
          statuspatch("Done");
          return;
        }

        if (recordTask?.company?.needs_extra_info === false) {
          statuspatch("Done");
          return;
        }

        setIsModalOpen(true);
      },
    },
  ];
  const getImageSource = (source: string) => {
    switch (source) {
      case "driver":
        return driverIcon;
      case "user":
        return userIcon;
      default:
        return userIcon;
    }
  };

  const statuspatch = async (status: string, extraData?: any) => {
    setStatus(status);
    try {
      const response = await taskController.taskPatch(
        { status: status, ...extraData },
        recordTask?.id
      );

      if (response.status === 400) {
        setIsModalOpen(true);
      }
    } catch (error) {
      console.log(error);
    }
  };

  const teampatch = (item: TTeam) => {
    setTeamName(item?.name);
    taskController
      .taskPatchPatch({ assigned_to_id: item?.id }, recordTask?.id)
      .then(() => {
        setModalOpen(false);
      });
  };

  const patchTask = () => {
    taskController.taskPatch({ note: text, pti: pti }, recordTask?.id);
    setModalOpen(!modalOpen);
  };

  // const nextStatus = (status : string) => {
  //   console.log();
  // }

  useEffect(() => {
    if (socketData && socketData.task) {
      if (
        socketData.type === "task_update" &&
        socketData.task.id === recordTask?.id
      ) {
        setRecordTask(socketData.task);
      }
    }
  }, [socketData]);

  return (
    <Modal
      onCancel={handleCancel}
      footer={null}
      open={modalOpen}
      width={800}
      maskClosable={true}
      // style={{ position: "fixed", right: 0, top: 0, bottom: 0, height: 1000 }}
    >
      <div className={!themes ? "TaskModal-header" : "TaskModal-header-dark"}>
        <div className={!themes ? "TaskModal-title" : "TaskModal-title-dark"}>
          <p className={!themes ? "p-driver" : "p-driver-dark"}>
            {recordTask?.customer?.name}
          </p>
          <Dropdown
            menu={{ items }}
            placement="bottom"
            arrow={{ pointAtCenter: true }}
            disabled={role === "Checker" && status === "Done"}
          >
            <button
              style={{
                marginLeft: 12,
                display: "flex",
                alignItems: "center",
              }}
              className={`status-${status}`}
            >
              {status}
              <EditOutlined style={{ marginLeft: 4 }} />
            </button>
            {/* <button onClick={e > nextStatus(status)}>
              <CaretRightOutlined /> 
            </button> */}
          </Dropdown>
        </div>
        <div className="mdoal-actions">
          {role !== "Checker" && (
            <Dropdown
              disabled={recordTask?.status !== "New"}
              menu={{ items: teams }}
              placement="bottom"
              arrow={{ pointAtCenter: true }}
            >
              {/* <button
                disabled={recordTask?.status !== "New"}
                style={{
                  marginRight: 12,
                  color: token.colorText,
                  backgroundColor: token.colorBgContainer,
                }}
                className={`btn-modal-action-${themes && "dark"}`}
              >
                <img src={forwardIcon} alt="" />
                Forward
              </button> */}
              <Button
                disabled={recordTask?.status !== "New"}
                style={{
                  marginRight: 10,
                  color: token.colorText,
                  backgroundColor: token.colorBgContainer,
                }}
                icon={<ArrowRightOutlined />}
              >
                Forward
              </Button>
            </Dropdown>
          )}
          {/* <button
            style={{
              marginLeft: 12,
              color: token.colorText,
              backgroundColor: token.colorBgContainer,
            }}
            className={`btn-modal-action-${themes && "dark"}`}
            onClick={showUploadModal}
          >
            <img src={uploadIcon} alt="" />
            Upload file
          </button> */}
          <Button
            style={{
              marginLeft: 10,
              color: token.colorText,
              backgroundColor: token.colorBgContainer,
            }}
            onClick={showUploadModal}
            icon={<UploadOutlined />}
          >
            Upload file
          </Button>
          {/* <button
            onClick={handleCancel}
            style={{
              marginLeft: 20,
              color: token.colorText,
              backgroundColor: token.colorBgContainer,
            }}
            className={`btn-modal-action-${themes && "dark"}`}
          >
            <img style={{ margin: 2 }} src={closeIcon} alt="" />
          </button> */}
          <Button
            onClick={handleCancel}
            style={{
              marginLeft: 20,
              color: token.colorText,
              backgroundColor: token.colorBgContainer,
            }}
            icon={<CloseOutlined />}
          />
        </div>
      </div>
      <div className="TaskModal-content">
        <Tabs style={{ marginLeft: 24 }}>
          <TabPane
            tab={
              <span
                style={{
                  display: "flex",
                  alignItems: "center",
                }}
              >
                <img style={{ marginRight: 10 }} src={infoIcon} alt="" />
                Information
              </span>
            }
            key="1"
          >
            <div className="info-div">
              <p
                style={{
                  fontSize: 18,
                  fontWeight: 700,
                  lineHeight: "24px",
                  letterSpacing: "-0.02em",
                  marginBottom: 16,
                }}
              >
                Information
              </p>
              <div className="info-body">
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Company</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {recordTask?.company?.name}
                  </p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Driver</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {recordTask?.customer?.name}
                  </p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Service</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {recordTask?.service?.title}
                  </p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Team</p>
                  <p className={!themes ? "info" : "info-dark"}>{teamName}</p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Assignee</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {recordTask?.in_charge?.username}
                  </p>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>PTI</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {pti === false ? "Do" : "No need"}
                  </p>

                  <Button
                    type="primary"
                    size="small"
                    onClick={(e) => setPti(!pti)}
                    style={{
                      marginLeft: 10,
                      background: token.colorBgContainer,
                      color: "#f68900",
                      outline: "none",
                      border: "1px solid #f68900",
                      borderRadius: 4,
                    }}
                  >
                    Change
                  </Button>
                </tr>
                <tr>
                  <p className={!themes ? "sub" : "sub-dark"}>Created at</p>
                  <p className={!themes ? "info" : "info-dark"}>
                    {moment(
                      recordTask?.created_at,
                      "YYYY-MM-DD HH:mm:ss"
                    ).format("DD.MM.YYYY HH:mm")}
                  </p>
                </tr>
              </div>
              <div style={{ marginTop: 20 }}>
                <label className={!themes ? "sub" : "sub-dark"}>Note:</label>
                <TextArea
                  style={{ padding: "7px 11px", marginTop: 10 }}
                  placeholder="Description"
                  defaultValue={text}
                  autoSize={{ minRows: 3, maxRows: 3 }}
                  onChange={(e) => setText(e.target.value)}
                />
              </div>
              {/* <button
                style={{
                  marginTop: 20,
                  color: token.colorText,
                  backgroundColor: token.colorBgContainer,
                }}
                className={`btn-modal-action-${themes && "dark"}`}
                onClick={(e) => patchTask()}
              >
                <img src={editIcon} alt="" />
                Save
              </button> */}
              <Button
                style={{
                  marginTop: 20,
                  color: "#f99e2c",
                  backgroundColor: token.colorBgContainer,
                }}
                onClick={(e) => patchTask()}
                icon={<EditOutlined />}
              >
                Save
              </Button>
            </div>
          </TabPane>
          {recordTask?.company?.needs_extra_info && (
            <TabPane
              tab={
                <span
                  style={{
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  <span>
                    <DatabaseOutlined />
                  </span>
                  Shift & Driver Data
                </span>
              }
              key="2"
            >
              <ShiftDataTab recordTask={recordTask} />
            </TabPane>
          )}

          <TabPane
            tab={
              <span style={{ display: "flex", alignItems: "center" }}>
                <img style={{ marginRight: 10 }} src={attachmentIcon} alt="" />
                Attachments
              </span>
            }
            key="3"
          >
            <div className="info-div">
              <p
                style={{
                  fontSize: 18,
                  fontWeight: 700,
                  lineHeight: "24px",
                  letterSpacing: "-0.02em",
                  marginBottom: 16,
                }}
              >
                Attachments
              </p>
            </div>
            <Table
              size="small"
              style={{ margin: "0 12px" }}
              dataSource={recordTask?.attachment_set?.map((u, i) => ({
                no: i + 1,
                ...u,
                created: moment(u?.created_at)
                  ?.tz(timeZone)
                  ?.format("DD.MM.YYYY HH:mm"),
                action: { ...u },
                by: u,
              }))}
              columns={[
                {
                  title: "User/Driver",
                  dataIndex: "by",
                  width: "25%",
                  key: 1,
                  ellipsis: {
                    showTitle: false,
                  },
                  render: (text: any) => (
                    <Tooltip
                      placement="topLeft"
                      title={
                        text?.uploaded_by_which_driver?.username ||
                        text?.uploaded_by_which_user?.username
                      }
                    >
                      <div style={{ display: "flex", alignItems: "center" }}>
                        {text?.uploaded_by_which_user ? (
                          <>
                            <img
                              src={getImageSource("user")}
                              alt=""
                              style={{ width: 15, height: 15, marginRight: 10 }}
                            />
                            <p>
                              {text?.uploaded_by_which_user?.username
                                ? text?.uploaded_by_which_user?.username
                                : ""}
                            </p>
                          </>
                        ) : (
                          <>
                            <img
                              src={getImageSource("driver")}
                              alt=""
                              style={{ width: 20, height: 15, marginRight: 10 }}
                            />
                            <p>
                              {text?.uploaded_by_which_driver?.name
                                ? text?.uploaded_by_which_driver?.name
                                : ""}
                            </p>
                          </>
                        )}
                      </div>
                    </Tooltip>
                  ),
                },
                {
                  title: "Name/Description",
                  dataIndex: "file_name",
                  width: "30%",
                  key: 1,
                  ellipsis: {
                    showTitle: false,
                  },
                },
                {
                  title: "Uploaded date",
                  dataIndex: "created",
                  key: 2,
                  width: "30%",
                  ellipsis: {
                    showTitle: false,
                  },
                },
                {
                  title: "Attachments",
                  dataIndex: "action",
                  key: 3,
                  width: "40%",
                  render: (text, record) => {
                    return (
                      <a
                        href={record?.path}
                        target="_blank"
                        rel="noreferrer"
                        style={{
                          padding: "6px 10px",
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "space-between",
                          borderRadius: 8,
                          color: !themes ? "rgba(15, 17, 28, 1)" : "#bbb",
                          border: "1px solid rgba(215, 216, 224, 1)",
                          boxShadow: "0px 1px 3px 0px rgba(20, 22, 41, 0.1)",
                        }}
                      >
                        {getFileType(record?.file_name)}
                        <span style={{ overflow: "hidden" }}>
                          {record?.file_name}
                        </span>
                        <img
                          src={letssee}
                          alt=""
                          style={{ textAlign: "right" }}
                        />
                      </a>
                    );
                  },
                  ellipsis: {
                    showTitle: false,
                  },
                },
              ]}
              rowClassName={(record, index) =>
                index % 2 === 0 ? "even-row" : "odd-row"
              }
            />
          </TabPane>
          <TabPane
            tab={
              <span style={{ display: "flex", alignItems: "center" }}>
                <img style={{ marginRight: 10 }} src={historyIcon} alt="" />
                History
              </span>
            }
            key="4"
          >
            <div className="info-div">
              <p
                style={{
                  fontSize: 18,
                  fontWeight: 700,
                  lineHeight: "24px",
                  letterSpacing: "-0.02em",
                  marginBottom: 16,
                }}
              >
                History
              </p>
            </div>
            <Table
              style={{ margin: "0 24px" }}
              loading={isLoading}
              size="small"
              pagination={false}
              dataSource={data?.map((u, i) => ({
                no: i + 1,
                ...u,
                by: u.user
                  ? { user: u?.user?.username }
                  : { driver: u?.driver?.name },
                created: moment(u?.timestamp)
                  ?.tz(timeZone)
                  ?.format("DD.MM.YYYY HH:mm"),
              }))}
              columns={[
                {
                  title: "User/Driver",
                  dataIndex: "by",
                  width: "25%",
                  key: 1,
                  ellipsis: {
                    showTitle: false,
                  },
                  render: (text: any, record: any) => (
                    <Tooltip
                      placement="topLeft"
                      title={text?.user || text?.driver}
                    >
                      <div style={{ display: "flex", alignItems: "center" }}>
                        {text?.user ? (
                          <>
                            <img
                              src={getImageSource("user")}
                              alt=""
                              style={{ width: 15, height: 15, marginRight: 10 }}
                            />
                            <p>
                              {typeof text?.user === "string" ? text?.user : ""}
                            </p>
                          </>
                        ) : (
                          <>
                            <img
                              src={getImageSource("driver")}
                              alt=""
                              style={{ width: 20, height: 15, marginRight: 10 }}
                            />
                            <p>
                              {typeof text.driver === "string"
                                ? text.driver
                                : ""}
                            </p>
                          </>
                        )}
                      </div>
                    </Tooltip>
                  ),
                },
                {
                  title: "Action",
                  dataIndex: "action",
                  width: "15%",
                  key: 2,
                  ellipsis: {
                    showTitle: false,
                  },
                },
                {
                  title: "Description",
                  dataIndex: "description",
                  width: "40%",
                  key: 3,
                  ellipsis: {
                    showTitle: false,
                  },
                  render: (note: string) => (
                    <Tooltip placement="topLeft" title={note}>
                      {note}
                    </Tooltip>
                  ),
                },
                {
                  title: "Timestamp",
                  dataIndex: "created",
                  key: 4,
                  width: "20%",
                  ellipsis: {
                    showTitle: false,
                  },
                },
              ]}
              rowClassName={(record, index) =>
                index % 2 === 0 ? "even-row" : "odd-row"
              }
            />
          </TabPane>
        </Tabs>
      </div>

      <ShiftAndCoDriverCreateModal
        recordTask={recordTask}
        open={isModalOpen}
        onOk={(values) => {
          statuspatch("Done", values);
          setIsModalOpen(false);
        }}
        onCancel={() => setIsModalOpen(false)}
      />
    </Modal>
  );
};

export default TaskModal;
