// Hooks
import { FC, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';

// Antd
import { Button, Drawer, Space, Spin } from 'antd';
import { FullscreenOutlined, CloseOutlined } from '@ant-design/icons';

// Types
import { TypeCardSize } from 'types/default';
import { FormInstance } from 'antd/lib/form/hooks/useForm';
import { TCommonMessages, useCommonMessages } from 'components/i18n';

// Styles
import styles from './CardInfoDrawer.module.scss';
import classNames from 'classnames';

type TypeCardInfoProps = {
  loading?: boolean;
  formProps?: FormInstance;
  children: JSX.Element;
  title: string | JSX.Element;
  cardSize: TypeCardSize;
  disabled?: boolean;
  setDisabled?: (val: boolean) => void;
  onToggleCardSize?: () => void;
  onCloseCard: () => void;
  updated?: string;
  drawerFooter?: JSX.Element | null;
};

const LARGE = 'large';

export const CardInfoDrawer: FC<TypeCardInfoProps> = observer(
  ({
    title,
    children,
    formProps,
    cardSize,
    disabled,
    setDisabled,
    onToggleCardSize,
    onCloseCard,
    updated,
    drawerFooter,
    loading,
  }) => {
    const [visibleCard, setVisibleCard] = useState<boolean>(!!cardSize);

    const translations: TCommonMessages = useCommonMessages();

    useEffect(() => {
      if (cardSize) {
        setVisibleCard(true);
      } else {
        setVisibleCard(false);
      }
    }, [cardSize]);

    const onCancel = (): void => {
      // Todo - resetFields Вынести отсюда
      formProps?.resetFields();
      onCloseCard();
      if (setDisabled) {
        setDisabled(true);
      }
    };

    const onSubmit = (): void => {
      formProps?.submit();
    };

    const footerConfiguration = (): JSX.Element | undefined => {
      if (drawerFooter === null) {
        return undefined;
      } else if (drawerFooter === undefined) {
        return (
          <div style={{ float: 'right' }}>
            {disabled ? (
              <Space>
                <Button
                  onClick={() => {
                    if (setDisabled) {
                      setDisabled(false);
                    }
                  }}
                >
                  {translations.confirmText.edit}
                </Button>
              </Space>
            ) : (
              <Space>
                <Button onClick={onCancel}>
                  {translations.confirmText.cancel}
                </Button>
                <Button type="primary" onClick={onSubmit}>
                  {translations.confirmText.save}
                </Button>
              </Space>
            )}
          </div>
        );
      } else {
        return drawerFooter;
      }
    };

    return (
      <Drawer
        title={title}
        mask={false}
        getContainer={false}
        visible={visibleCard}
        className={classNames(styles['card-info-drawer'], {
          [styles['title--string']]: typeof title === 'string',
        })}
        width={cardSize === LARGE ? '100%' : 500}
        closable={false}
        forceRender
        extra={
          <div className={styles['header-container']}>
            {updated ? (
              <Space>
                <span>{updated}</span>
              </Space>
            ) : null}
            &nbsp; &nbsp;
            {onToggleCardSize && (
              <Space>
                <FullscreenOutlined
                  className={styles['header--icon']}
                  onClick={onToggleCardSize}
                />
              </Space>
            )}
            &nbsp;
            <Space>
              <CloseOutlined
                className={styles['header--icon']}
                onClick={onCancel}
              />
            </Space>
          </div>
        }
        footer={!loading && footerConfiguration()}
      >
        {loading ? (
          <Spin
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              height: '100%',
            }}
          />
        ) : (
          children
        )}
      </Drawer>
    );
  },
);
