import { useState } from 'react';
import { Col, Form, Select, TimePicker } from 'antd';
import { DateAndTimeFormat } from 'components/DashboardTable/constants';
import { monthPeriod, period, weekPeriod } from './helpers';
import { TTranslations, TValidateMessage } from '../types';
import styles from './Template.module.scss';

const { Option } = Select;

export type TPeriodProps = {
  form: any;
  translations: {
    week: TTranslations;
    month: TTranslations;
    timeRotation: TTranslations;
    validateMessage: TValidateMessage;
  };
};

const Period = ({
  form,
  translations: { week, month, timeRotation, validateMessage },
}: TPeriodProps): JSX.Element => {
  const [periodType, setPeriodType] = useState(
    form.getFieldValue('schedule')?.period,
  );

  const handleChange = (value: string): void => setPeriodType(value);

  const renderPeriod = (): JSX.Element | null => {
    switch (periodType) {
      case 'day':
        return (
          <Col xs={{ span: 5, offset: 2 }} lg={{ span: 6, offset: 2 }}>
            <Form.Item
              label={timeRotation.time}
              name={['schedule', 'time']}
              rules={[
                {
                  required: true,
                  message: validateMessage.time,
                },
              ]}
              extra={timeRotation.timeSubTitle}
            >
              <TimePicker
                style={{ width: '100%', maxWidth: 370 }}
                format={DateAndTimeFormat.HM}
                placeholder={validateMessage.time}
                showNow={false}
              />
            </Form.Item>
          </Col>
        );
      case 'week':
        return (
          <Col xs={{ span: 5, offset: 2 }} lg={{ span: 6, offset: 2 }}>
            <Form.Item
              label={week.title}
              name={['schedule', 'week_day']}
              rules={[
                {
                  required: true,
                  message: validateMessage.week,
                },
              ]}
              extra={week.subTitle}
            >
              <Select
                mode="multiple"
                allowClear
                maxTagCount="responsive"
                style={{ maxWidth: 370 }}
                placeholder={week.placeholder}
                className={styles['customSelectMultiplePeriod']}
                optionLabelProp="label"
              >
                {weekPeriod(week).map((item) => (
                  <Option
                    key={item.value}
                    value={item.value}
                    label={item.label}
                  >
                    <span> {item.label.replace(';', '')}</span>
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        );
      case 'month':
        return (
          <Col xs={{ span: 5, offset: 2 }} lg={{ span: 6, offset: 2 }}>
            <Form.Item
              label={timeRotation.month}
              name={['schedule', 'month']}
              rules={[
                {
                  required: true,
                  message: validateMessage.month,
                },
              ]}
              extra={month.subTitle}
            >
              <Select
                mode="multiple"
                maxTagCount="responsive"
                allowClear
                style={{ maxWidth: 370 }}
                placeholder={month.placeholder}
                className={styles['customSelectMultiplePeriod']}
                optionLabelProp="label"
              >
                {monthPeriod(month).map((item) => (
                  <Option
                    key={item.value}
                    value={item.value}
                    label={item.label}
                  >
                    <span> {item.label.replace(';', '')}</span>
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        );
      default:
        return null;
    }
  };

  return (
    <>
      <Col xs={{ span: 5, offset: 2 }} lg={{ span: 6, offset: 2 }}>
        <Form.Item
          label={timeRotation.title}
          name={['schedule', 'period']}
          rules={[
            {
              required: true,
              message: validateMessage.period,
            },
          ]}
          extra={timeRotation.subTitle}
        >
          <Select
            onChange={handleChange}
            value={periodType}
            style={{ maxWidth: 370 }}
          >
            {period(timeRotation).map((item) => (
              <Option key={item.value} value={item.value}>
                {item.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
      </Col>

      {renderPeriod()}
    </>
  );
};

export default Period;
