import { useEffect } from 'react';
import { Button } from 'antd';
import { CloseOutlined, FullscreenOutlined } from '@ant-design/icons';
import EditAndSaveButton from './EditAndSaveButton';
import styles from 'pages/EventsJournalDashboard/EventCardInfo.module.scss';

const DrawerHeader = ({
  cardInfo,
  translations,
  isLargeCardWidth,
  setLargeWidth,
  parentDrawer,
  isEditFields,
  handleToggleEdit,
  setVisibleCardInfo,
}: any): JSX.Element => {
  useEffect(() => {
    setVisibleCardInfo(true);
  }, [cardInfo]);

  return (
    <div className={styles['cardHeader']}>
      <span className={styles['cardHeader_title']}>{`${
        cardInfo?.name || 'Добавить новое правило'
      }`}</span>
      <div className={styles['cardHeader_date']}>
        {cardInfo?.updated || null}
      </div>
      <div className={styles['cardHeader_icon-block']}>
        {!isLargeCardWidth && (
          <FullscreenOutlined
            className={styles['cardHeader_icon-block-moreInfo']}
            onClick={setLargeWidth}
          />
        )}
        {!isLargeCardWidth ? (
          <CloseOutlined
            className={styles['cardHeader_icon-block-closeIcon']}
            onClick={parentDrawer}
          />
        ) : (
          <div style={{ display: 'flex' }}>
            <div style={{ marginRight: 20 }}>
              <EditAndSaveButton
                isEditFields={isEditFields}
                handleToggleEdit={handleToggleEdit}
              />
            </div>
            <Button type="primary" onClick={parentDrawer}>
              Закрыть
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};

export default DrawerHeader;
