import { DownOutlined } from "@ant-design/icons";
import { Button, Checkbox, Col, Form, InputNumber, Popover, Radio, Row, Space, Spin } from "antd";
import { useState } from "react";
import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
import { useQuery } from "@apollo/client/react";

export default function TimeTicketCalculatorComponent({
  setProductiveHours,

  jobid
}) {
  const { loading, data: lineTicketData } = useQuery(GET_JOB_INFO_DRAW_CALCULATIONS, {
    variables: { id: jobid },
    skip: !jobid,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });

  const [visible, setVisible] = useState(false);
  const handleOpenChange = (flag) => setVisible(flag);
  const handleFinish = ({ type, hourstype, percent }) => {
    //setProductiveHours(values);
    //setVisible(false);
    const eligibleHours = Array.isArray(hourstype)
      ? lineTicketData.joblines.reduce((acc, val) => acc + (hourstype.includes(val.mod_lbr_ty) ? val.mod_lb_hrs : 0), 0)
      : lineTicketData.joblines.reduce((acc, val) => acc + (hourstype === val.mod_lbr_ty ? val.mod_lb_hrs : 0), 0);
    if (type === "draw") {
      setProductiveHours(eligibleHours * (percent / 100));
    } else if (type === "cut") {
      setProductiveHours(eligibleHours * (percent / 100));
      console.log("Cut selected, rate set to: ", lineTicketData.jobs_by_pk[`rate_${hourstype.toLowerCase()}`]);
    }
  };

  const popContent = (
    <Spin spinning={loading}>
      <Form onFinish={handleFinish}>
        <Form.Item name="type">
          <Radio.Group>
            <Radio.Button value="draw">Draw</Radio.Button>
            <Radio.Button value="cut">Cut of Sale</Radio.Button>
          </Radio.Group>
        </Form.Item>

        <Form.Item noStyle shouldUpdate>
          {({ getFieldValue }) => (
            <Form.Item name="hourstype">
              {getFieldValue("type") === "draw" ? (
                <Checkbox.Group>
                  <Row>
                    <Col span={8}>
                      <Checkbox value="LAB" style={{ lineHeight: "32px" }}>
                        Body
                      </Checkbox>
                    </Col>
                    <Col span={8}>
                      <Checkbox value="LAR" style={{ lineHeight: "32px" }}>
                        Refinish
                      </Checkbox>
                    </Col>
                    <Col span={8}>
                      <Checkbox value="LAM" style={{ lineHeight: "32px" }}>
                        Mechanical
                      </Checkbox>
                    </Col>
                    <Col span={8}>
                      <Checkbox value="LAF" style={{ lineHeight: "32px" }}>
                        Frame
                      </Checkbox>
                    </Col>
                    <Col span={8}>
                      <Checkbox value="LAG" style={{ lineHeight: "32px" }}>
                        Glass
                      </Checkbox>
                    </Col>
                  </Row>
                </Checkbox.Group>
              ) : (
                <Radio.Group>
                  <Radio value="LAB">Body</Radio>

                  <Radio value="LAR">Refinish</Radio>

                  <Radio value="LAM">Mechanical</Radio>

                  <Radio value="LAF">Frame</Radio>

                  <Radio value="LAG">Glass</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          )}
        </Form.Item>

        <Form.Item name="percent">
          <Space.Compact>
            <InputNumber min={0} max={100} precision={1} />
            <span
              style={{
                padding: "0 11px",
                backgroundColor: "#fafafa",
                border: "1px solid #d9d9d9",
                borderLeft: 0,
                display: "flex",
                alignItems: "center"
              }}
            >
              %
            </span>
          </Space.Compact>
        </Form.Item>
        <Button htmlType="submit">Calculate</Button>
      </Form>
    </Spin>
  );

  return (
    <Popover
      content={popContent}
      trigger={["click"]}
      open={visible}
      onOpenChange={handleOpenChange}
      placement="right"
      destroyOnHidden
    >
      <Button onClick={(e) => e.preventDefault()} icon={<DownOutlined />} iconPlacement="end">
        Draw Calculator
      </Button>
    </Popover>
  );
}
