import { Button, Form, Input, Select, Switch } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { setEmailOptions } from "../../redux/email/email.actions";
import { selectCurrentUser } from "../../redux/user/user.selectors";
import { GenerateDocument } from "../../utils/RenderTemplate";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import dayjs from "../../utils/day";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser
});

const mapDispatchToProps = (dispatch) => ({
  setEmailOptions: (e) => dispatch(setEmailOptions(e))
});

export function EmailTestComponent({ currentUser, setEmailOptions }) {
  const [form] = Form.useForm();
  const notification = useNotification();

  const handleFinish = (values) => {
    GenerateDocument(
      {
        name: values.key,
        variables: {
          ...(values.start
            ? {
                start: dayjs(values.start).startOf("day").format("YYYY-MM-DD")
              }
            : {}),
          ...(values.end ? { end: dayjs(values.end).endOf("day").format("YYYY-MM-DD") } : {}),
          ...(values.start ? { starttz: dayjs(values.start).startOf("day") } : {}),
          ...(values.end ? { endtz: dayjs(values.end).endOf("day") } : {}),

          ...(values.id ? { id: values.id } : {})
        }
      },
      {
        to: values.to
      },
      values.email ? "e" : "p",
      null,
      notification
    );
  };

  return (
    <div>
      <Form
        onFinish={handleFinish}
        autoComplete={"off"}
        layout="vertical"
        form={form}
        initialValues={{
          to: ["allan.carr@thinkimex.com", "allanlcarr@outlook.com", "allanlcarr@icloud.com"]
        }}
      >
        <LayoutFormRow>
          <Form.Item
            name="to"
            label="Recipients"
            rules={[
              {
                type: "array"
              }
            ]}
          >
            <Select mode="tags" tokenSeparators={[",", ";"]} />
          </Form.Item>
          <Form.Item
            name="key"
            label="Template Key"
            rules={[
              {
                required: true
                //message: t("general.validation.required"),
              }
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="id" label="Record ID">
            <Input />
          </Form.Item>
          <Form.Item name="email" label="Generate as email?" valuePropName="checked">
            <Switch />
          </Form.Item>
        </LayoutFormRow>
        <LayoutFormRow>
          <Form.Item name="start" label="Start Date">
            <DateTimePicker />
          </Form.Item>
          <Form.Item name="end" label="End Date">
            <DateTimePicker />
          </Form.Item>
        </LayoutFormRow>
      </Form>
      <Button onClick={() => form.submit()}>Execute</Button>
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(EmailTestComponent);