// Hooks
import { FC, useMemo, useState } from 'react';

// Antd
import { Col, Form, InputNumber, Select, TimePicker } from 'antd';

// Types
import { RootStore } from 'stores/RootStore';
import { TRotationEndpointType } from 'pages/RotationDashboard/types';
import { TypePeriod, TypeRotation, TypeRotationBlockProps } from './types';

// Apps
import { useRotationDeviceEndpointMessage } from 'pages/RotationDashboard/i18n';
import { useDevicesMessages } from 'pages/DevicesDashboard/i18n';
import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/StoreProvider';

const { Option } = Select;

export const RotationBlock: FC<TypeRotationBlockProps> = observer(
  ({ disabled }) => {
    const rootStore: RootStore = useStore();
    const devicesUiStore = rootStore.devicesUiStore;

    const [rotationType, setRotationType] = useState<TypeRotation>(
      devicesUiStore.getRotationFormField.event_rotation_type || 0,
    );
    const [period, setPeriod] = useState<TypePeriod>(0);

    // Переводы
    const locale = useRotationDeviceEndpointMessage();

    const {
      localeCardInfo: { endpoint },
    } = useDevicesMessages();

    const rotation = (): TRotationEndpointType => {
      const { time, size } = locale.typeRotation;

      return [
        { label: time, value: 1 },
        { label: size, value: 2 },
      ];
    };

    const handleChange = (value: TypeRotation): void => {
      setRotationType(value);
    };

    const onChangePeriod = (value: TypePeriod): void => {
      setPeriod(value);
    };

    const formItemPeriodExtraConfiguration = useMemo((): string => {
      if (period === 1) {
        return locale.day.subTitle;
      } else if (period === 2) {
        return locale.week.subTitle;
      } else {
        return locale.month.subTitle;
      }
    }, [
      locale.day.subTitle,
      locale.month.subTitle,
      locale.week.subTitle,
      period,
    ]);

    const renderFields = (type?: number): JSX.Element | null => {
      switch (type) {
        case 1:
          return (
            <>
              <Form.Item
                labelCol={{ span: 7 }}
                label={endpoint.rotation.period}
                name="event_rotation_period"
                extra={formItemPeriodExtraConfiguration}
              >
                <Select
                  onChange={onChangePeriod}
                  style={{ width: '100%' }}
                  disabled={disabled}
                  value={
                    devicesUiStore.getRotationFormField.event_rotation_type || 0
                  }
                  placeholder={'Выберите период'}
                >
                  <Option value={1}>{endpoint.rotation.day}</Option>
                  <Option value={2}>{endpoint.rotation.week}</Option>
                  <Option value={3}>{endpoint.rotation.month}</Option>
                </Select>
              </Form.Item>
              <Form.Item
                labelCol={{ span: 7 }}
                label={endpoint.rotation.time}
                name="event_rotation_time"
                extra={endpoint.rotation.timeExtra}
              >
                <TimePicker
                  style={{ width: '100%' }}
                  format={'HH:mm:ss'}
                  disabled={disabled}
                />
              </Form.Item>
            </>
          );

        case 2:
          return (
            <Form.Item
              labelCol={{ span: 7 }}
              labelAlign="left"
              label={
                <div style={{ paddingTop: 25 }}>
                  {locale.sizeRotations.title}
                </div>
              }
              name="event_rotation_size"
              rules={[
                {
                  required: true,
                  message: locale.validateMessage.sizeRotations,
                },
              ]}
              extra={locale.sizeRotations.subTitle}
            >
              <InputNumber
                disabled={disabled}
                min={100}
                style={{ width: '100%' }}
                placeholder={'Заполните поле'}
              />
            </Form.Item>
          );
        default:
          return null;
      }
    };

    return (
      <div style={{ display: 'flex', width: '100%', flexDirection: 'column' }}>
        <Col span={24}>
          <Form.Item
            labelCol={{ span: 7 }}
            label={locale.typeRotation.title}
            name="event_rotation_type"
          >
            <Select
              onChange={handleChange}
              style={{ width: '100%' }}
              disabled={disabled}
              placeholder={'Выберите тип ротации'}
            >
              {rotation().map((item) => (
                <Option key={item.value} value={item.value}>
                  {item.label}
                </Option>
              ))}
            </Select>
          </Form.Item>

          {renderFields(rotationType)}
        </Col>
      </div>
    );
  },
);
