import { DatePicker, Form, Input, Select } from 'antd';
import { statusOption, USERS } from '../MOCK';
import { TypeLargeFormItemMessage, TypeSmallFormItemMessage } from '../types';

const { Option } = Select;

export const incidentCardInfoFormSmallTemplate = (
  isEditFields: boolean,
  setRequiredFields: (bool: boolean) => void,
  translations: TypeSmallFormItemMessage,
): JSX.Element[] => {
  const {
    importance,
    title,
    events,
    status,
    assignedTo,
    deadline,
    groups,
    assignedToError,
    statusOptionMessage,
    comment,
    created,
  } = translations;

  return [
    <Form.Item label={importance} name="importance">
      <Input disabled={true} />
    </Form.Item>,
    <Form.Item label={title} name="title">
      <Input disabled={true} />
    </Form.Item>,
    <Form.Item label={events} name="events">
      <Input disabled={true} />
    </Form.Item>,
    <Form.Item
      label={status}
      name="status"
      dependencies={['assigned_to']}
      rules={[
        ({ getFieldValue }) => ({
          validator(_, value) {
            if (value === 1 && !getFieldValue('assigned_to')) {
              setRequiredFields(true);
              return Promise.reject(new Error(assignedToError));
            }
            return Promise.resolve();
          },
        }),
      ]}
    >
      <Select disabled={!isEditFields}>
        {statusOption(statusOptionMessage)?.map((option) => {
          return (
            <Option key={option.value} value={option.value}>
              {option.label}
            </Option>
          );
        })}
      </Select>
    </Form.Item>,
    <Form.Item
      label={assignedTo}
      name="assigned_to"
      dependencies={['status']}
      rules={[
        ({ getFieldValue }) => ({
          validator(_, value) {
            if (
              getFieldValue('status') === 1 &&
              (value === null || value === undefined)
            ) {
              setRequiredFields(true);
              return Promise.reject();
            }
            setRequiredFields(false);
            return Promise.resolve();
          },
        }),
      ]}
    >
      <Select allowClear disabled={!isEditFields}>
        {USERS?.map((option) => {
          return (
            <Option key={option.value} value={option.value}>
              {option.label}
            </Option>
          );
        })}
      </Select>
    </Form.Item>,
    <Form.Item label={deadline} name="deadline">
      <DatePicker disabled={!isEditFields} style={{ width: '100%' }} />
    </Form.Item>,
    <Form.Item label={groups} name="groups">
      <Input disabled={true} />
    </Form.Item>,
    <Form.Item label={created} name="created">
      <Input disabled={true} />
    </Form.Item>,
    <Form.Item label={comment} name="comment">
      <Input disabled={!isEditFields} />
    </Form.Item>,
  ];
};

export const incidentCardInfoFormLargeTemplate = (
  isEditFields: boolean,
  setRequiredFields: (bool: boolean) => void,
  translations: TypeLargeFormItemMessage,
): {
  [key: string]: JSX.Element[];
} => {
  const { main, details } = translations;

  return {
    main: [
      <Form.Item label={main.title} name="title">
        <Input disabled={true} />
      </Form.Item>,
      <Form.Item label={main.comment} name="created">
        <Input disabled={true} />
      </Form.Item>,
      <Form.Item label={main.deadline} name="deadline">
        <DatePicker disabled={!isEditFields} style={{ width: '100%' }} />
      </Form.Item>,
      <Form.Item label={main.importance} name="importance">
        <Input disabled={true} />
      </Form.Item>,
      <Form.Item label={main.comment} name="comment">
        <Input disabled={!isEditFields} />
      </Form.Item>,
      <Form.Item label={main.groups} name="group">
        <Input disabled={true} />
      </Form.Item>,
    ],

    details: [
      <Form.Item
        label={details.status}
        name="status"
        dependencies={['assigned_to']}
        rules={[
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (value === 1 && !getFieldValue('assigned_to')) {
                setRequiredFields(true);
                return Promise.reject(new Error(details.assignedToError));
              }
              setRequiredFields(false);
              return Promise.resolve();
            },
          }),
        ]}
      >
        <Select disabled={!isEditFields}>
          {statusOption(details.statusOptionMessage)?.map((option) => {
            return (
              <Option key={option.value} value={option.value}>
                {option.label}
              </Option>
            );
          })}
        </Select>
      </Form.Item>,
      <Form.Item
        label={details.assignedTo}
        name="assigned_to"
        dependencies={['status']}
        rules={[
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (
                getFieldValue('status') === 1 &&
                (value === null || value === undefined)
              ) {
                setRequiredFields(true);
                return Promise.reject();
              }
              setRequiredFields(false);
              return Promise.resolve();
            },
          }),
        ]}
      >
        <Select allowClear disabled={!isEditFields}>
          {USERS?.map((option) => {
            return (
              <Option key={option.value} value={option.value}>
                {option.label}
              </Option>
            );
          })}
        </Select>
      </Form.Item>,
    ],
    recommendation: [],
    effects: [],
    events: [],
  };
};
