import {
  Checkbox,
  Col,
  Form,
  Input,
  Row,
  Select,
  Space,
  Switch,
  Tag,
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectNoteUpsert } from "../../redux/modals/modals.selectors";
import NotesPresetButton from "../notes-preset-button/notes-preset-button.component";

const mapStateToProps = createStructuredSelector({
  noteUpsertModal: selectNoteUpsert,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(NoteUpsertModalComponent);

export function NoteUpsertModalComponent({ form, noteUpsertModal }) {
  const { t } = useTranslation();
  const { jobId, existingNote, relatedRos } = noteUpsertModal.context;

  const filteredRelatedRos = relatedRos
    ? relatedRos.filter((j) => j.id !== jobId)
    : [];

  return (
    <>
      <Row gutter={[16, 16]}>
        <Col span={8}>
          <Form.Item
            label={t("notes.fields.critical")}
            name="critical"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t("notes.fields.private")}
            name="private"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item
            label={t("notes.fields.type")}
            name="type"
            initialValue="general"
          >
            <Select
              options={[
                { value: "general", label: t("notes.fields.types.general") },
                { value: "customer", label: t("notes.fields.types.customer") },
                { value: "shop", label: t("notes.fields.types.shop") },
                { value: "office", label: t("notes.fields.types.office") },
                { value: "parts", label: t("notes.fields.types.parts") },
                { value: "paint", label: t("notes.fields.types.paint") },
                {
                  value: "supplement",
                  label: t("notes.fields.types.supplement"),
                },
              ]}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <NotesPresetButton form={form} />
        </Col>
        <Col span={24}>
          <Form.Item
            label={t("notes.fields.text")}
            name="text"
            rules={[
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ]}
          >
            <Input.TextArea
              rows={8}
              placeholder={t("notes.labels.newnoteplaceholder")}
            />
          </Form.Item>
        </Col>
      </Row>
      <div>
        <div>{!existingNote && t("notes.labels.addtorelatedro")}</div>
        {!existingNote &&
          filteredRelatedRos.map((j, idx) => (
            <Space key={j.id} align="center">
              <Form.Item
                noStyle
                name={["relatedros", j.id]}
                valuePropName="checked"
              >
                <Checkbox />
              </Form.Item>
              <Tag>
                {`${j.ro_number || "N/A"}${j.clm_no ? ` | ${j.clm_no}` : ""}${
                  j.status ? ` | ${j.status}` : ""
                }`}
              </Tag>
            </Space>
          ))}
      </div>
    </>
  );
}