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 moment from "moment";

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

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

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

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

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

  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);