import { Button, Form, Input, Select, Switch } from "antd";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
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({});

const mapDispatchToProps = () => ({});

export function EmailTestComponent() {
  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);
