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={6}>
          <Form.Item label={t("notes.fields.critical")} name="critical" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label={t("notes.fields.private")} name="private" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Col>
        <Col span={6}>
          <Form.Item label={t("notes.fields.pinned")} name="pinned" valuePropName="checked">
            <Switch />
          </Form.Item>
        </Col>
        <Col span={6}>
          <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>
    </>
  );
}