import { useEffect, useState } from 'react';
import { Button, Card, Col, Form, InputNumber, Select, Tooltip } from 'antd';
import { TRotationType } from '../types';
import { DateAndTimeFormat } from 'components/DashboardTable/constants';
import { QuestionCircleOutlined } from '@ant-design/icons';
import Period from './Period';
import moment from 'moment';
const { Option } = Select;

const Main = ({
  form,
  onFinish,
  cardTitle,
  tooltip,
  translations,
  data,
}: {
  form: any;
  data: any;
  cardTitle: string;
  tooltip: string;
  onFinish: (value: any) => void;
  translations: any;
}): JSX.Element => {
  const [rotationType, setRotationType] = useState<string>('');

  useEffect(() => {
    setRotationType(`${data?.rotation_type}`);
  }, [data?.rotation_type]);

  useEffect(() => {
    if (data) {
      form.setFieldsValue({
        rotation_type: `${data.rotation_type}`,
        size_rotation: data.size_rotation,
        schedule: {
          month: data.schedule?.month || [],
          period: data.schedule?.period,
          time:
            data.schedule?.time &&
            moment(data.schedule?.time, DateAndTimeFormat.HM),
          week_day: data.schedule?.week_day || [],
        },
      });
    } else {
      form.setFieldsValue({
        rotation_type: '2',
      });
    }
  }, [data, form]);

  const rotation = (): TRotationType => {
    const {
      typeRotation: { time, size, disabled },
    }: { typeRotation: { time: string; size: string; disabled: string } } =
      translations;
    return [
      { label: time, value: '0' },
      { label: size, value: '1' },
      { label: disabled, value: '2' },
    ];
  };

  const { typeRotation, ...translation } = translations;

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

  const renderFields = (type: string): JSX.Element | null => {
    switch (type) {
      case '0':
        return <Period form={form} translations={translation} />;
      case '1':
        return (
          <Col xs={{ span: 6, offset: 2 }} lg={{ span: 6, offset: 2 }}>
            <Form.Item
              label={translations.sizeRotations.title}
              name="size_rotation"
              rules={[
                {
                  required: true,
                  message: translations.validateMessage.sizeRotations,
                },
              ]}
              extra={translations.sizeRotations.subTitle}
            >
              <InputNumber min={1} style={{ width: '100%', maxWidth: 370 }} />
            </Form.Item>
          </Col>
        );
      default:
        return null;
    }
  };

  return (
    <Card
      style={{ marginBottom: 20 }}
      title={
        <div>
          <span style={{ marginRight: 15 }}>{cardTitle}</span>
          <Tooltip title={tooltip}>
            <QuestionCircleOutlined />
          </Tooltip>
        </div>
      }
    >
      <Form layout="vertical" form={form} onFinish={onFinish}>
        <div style={{ display: 'flex', width: '100%' }}>
          <Col xs={{ span: 5, offset: 0 }} lg={{ span: 6, offset: 0 }}>
            <Form.Item label={typeRotation.title} name="rotation_type">
              <Select style={{ maxWidth: 370 }} onChange={handleChange}>
                {rotation().map((item) => (
                  <Option key={item.value} value={item.value}>
                    {item.label}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>

          {renderFields(rotationType)}
        </div>
        <Form.Item>
          <Button type="primary" onClick={form.submit}>
            {translations.save}
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default Main;
