import { Button, Card, DatePicker, Form, Popover, Space } from "antd";
import moment from "moment";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { selectTechnician } from "../../redux/tech/tech.selectors";
import DatePIckerRanges from "../../utils/DatePickerRanges";
import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TechJobPrintTickets);

export function TechJobPrintTickets({ technician, event }) {
  const { t } = useTranslation();

  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const [visibility, setVisibility] = useState(false);

  useEffect(() => {
    if (visibility && event) {
      form.setFieldsValue(event);
    }
  }, [visibility, form, event]);

  const handleFinish = async (values) => {
    logImEXEvent("schedule_manual_event");

    setLoading(true);
    const start = values.dates[0];
    const end = values.dates[1];

    try {
      await GenerateDocument(
        {
          name: TemplateList().timetickets_employee.key,
          variables: {
            ...(start
              ? { start: moment(start).startOf("day").format("YYYY-MM-DD") }
              : {}),
            ...(end
              ? { end: moment(end).endOf("day").format("YYYY-MM-DD") }
              : {}),
            ...(start ? { starttz: moment(start).startOf("day") } : {}),
            ...(end ? { endtz: moment(end).endOf("day") } : {}),

            id: technician.id,
          },
        },
        {
          to: technician.email,
          subject: TemplateList().timetickets_employee.subject,
        },
        "p"
      );
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
      setVisibility(false);
      form.resetFields();
    }
  };

  const overlay = (
    <Card>
      <div>
        <Form form={form} layout="vertical" onFinish={handleFinish}>
          <Form.Item
            label={t("reportcenter.labels.dates")}
            name="dates"
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
          >
            <DatePicker.RangePicker
              ranges={DatePIckerRanges}
              format={"MM/DD/YYYY"}
            />
          </Form.Item>

          <Space wrap>
            <Button type="primary" onClick={() => form.submit()}>
              {t("general.actions.print")}
            </Button>
            <Button
              onClick={() => {
                setVisibility(false);
                form.resetFields();
              }}
            >
              {t("general.actions.cancel")}
            </Button>
          </Space>
        </Form>
      </div>
    </Card>
  );

  const handleClick = (e) => {
    setVisibility(true);
  };

  return (
    <Popover content={overlay} visible={visibility}>
      <Button loading={loading} onClick={handleClick}>
        {t("general.actions.print")}
      </Button>
    </Popover>
  );
}
