import { useEffect } from 'react';
import { Button, Drawer, Form, Input, Space } from 'antd';
import { TypeTags, TypeTagCreate } from 'types/default';
import { CloseOutlined } from '@ant-design/icons';
import styles from '../CardInfoDrawer/CardInfoDrawer.module.scss';

const TagFormTemplate = ({
  getSelectedTag,
  onClose,
  onFinish,
  disabled,
  setDisabled,
  title,
  translations,
  onFinishFailed,
}: {
  getSelectedTag: TypeTagCreate | TypeTags | undefined;
  onClose: () => void;
  onFinish: (values: TypeTags) => void;
  disabled: boolean;
  setDisabled: (values: boolean) => void;
  title: string;
  translations: any;
  onFinishFailed: (values: any) => void;
}): JSX.Element => {
  const [form] = Form.useForm();
  const FORM_TAGS_ITEM = [
    {
      key: 'name',
      label: translations.fields.name,
      name: 'name',
      rules: [
        {
          required: true,
          message: translations.groupsMessages.validation.name,
        },
        {
          max: 128,
          message: translations.groupsMessages.validation.nameMaxLength,
        },
      ],
    },
    {
      key: 'description',
      label: translations.fields.description,
      name: 'description',
    },
  ];
  useEffect(() => {
    if (getSelectedTag)
      form.setFieldsValue({
        name: getSelectedTag.name,
        description: getSelectedTag.description,
      });
  }, [form, getSelectedTag]);

  return (
    <Drawer
      title={title}
      closable={false}
      mask={false}
      getContainer={false}
      visible={!!getSelectedTag}
      style={{ position: 'absolute' }}
      className={styles['card-info-drawer']}
      width={500}
      onClose={onClose}
      headerStyle={{ background: 'rgba(176, 183, 193, 0.35)' }}
      footerStyle={{ background: '#F0F5FF' }}
      extra={
        <div className={'flex-aijc'}>
          <Space>
            <CloseOutlined
              style={{ color: '#3C64DC', fontSize: '1.5em' }}
              onClick={() => onClose()}
            />
          </Space>
        </div>
      }
      footer={
        <div style={{ float: 'right' }}>
          {disabled ? (
            <Space>
              <Button onClick={() => setDisabled(false)}>
                {translations.confirmText.edit}
              </Button>
            </Space>
          ) : (
            <Space>
              <Button onClick={() => setDisabled(true)}>
                {translations.confirmText.cancel}
              </Button>
              <Button key="submit" type="primary" onClick={() => form.submit()}>
                {translations.confirmText.save}
              </Button>
            </Space>
          )}
        </div>
      }
    >
      <Form
        key="tagsForm"
        name="basic"
        layout={'vertical'}
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        {FORM_TAGS_ITEM.map((item) => (
          <Form.Item {...item}>
            <Input disabled={disabled} />
          </Form.Item>
        ))}
      </Form>
    </Drawer>
  );
};

export default TagFormTemplate;
