import React, { useEffect, useState } from 'react';
import { Divider, Drawer, Input } from 'antd';
import { useNavigate } from 'react-router-dom';
import DrawerHeader from './DrawerHeader';
import DrawerFooter from './DrawerFooter';
import styles from '../../AssetsDashboard/AssetsCardInfo/AssetsCardInfo.module.scss';
import {
  TStorageCardInfoField,
  TStorageRecord,
  TypeCardInfoDrawer,
} from '../types';

const StorageCardInfo = ({
  cardInfo,
  fields,
  handleAction,
  translations,
}: {
  cardInfo: TStorageRecord;
  fields: TStorageCardInfoField[];
  handleAction: (
    e: React.MouseEvent<HTMLElement>,
    action: string,
    id: number,
  ) => void;
  translations: TypeCardInfoDrawer;
}): JSX.Element => {
  const [visibleCardInfo, setVisibleCardInfo] = useState<boolean>(true);

  const history = useNavigate();

  const parentDrawer = (): void => {
    setVisibleCardInfo(false);
    history('/storage');
  };

  useEffect(() => setVisibleCardInfo(true), [cardInfo]);

  const parseInputValue = (key: string): string | number => {
    if (key === 'crc') {
      if (cardInfo[key]) return translations.crcFieldBoolean.true;
      else return translations.crcFieldBoolean.false;
    } else {
      return cardInfo[key as keyof TStorageRecord];
    }
  };

  const handleClick = (e: React.MouseEvent<HTMLElement>): void =>
    handleAction(e, 'download', cardInfo.id);

  return (
    <Drawer
      closable={false}
      mask={false}
      getContainer={false}
      style={{ position: 'absolute' }}
      visible={visibleCardInfo}
      className={styles['customDrawer']}
      title={
        <DrawerHeader
          translations={translations.header}
          parentDrawer={parentDrawer}
        />
      }
      footer={
        <DrawerFooter
          translations={translations.footer}
          handleClick={handleClick}
        />
      }
    >
      {fields.map((field) => {
        return (
          <div key={field.key} className={'flex-aijc-colum'}>
            {visibleCardInfo && (
              <div
                className={styles['wrapper_group-assets-container-small']}
                key={field.title}
                style={{ margin: '10px' }}
              >
                <span
                  className={
                    styles['wrapper_group-assets-container-small__title']
                  }
                >
                  {field.title}
                </span>
                <Input
                  className={
                    styles['wrapper_group-assets-container-small__input']
                  }
                  value={parseInputValue(field.key)}
                  disabled
                />
              </div>
            )}
            <Divider className={'divider_storage'} />
          </div>
        );
      })}
    </Drawer>
  );
};

export default StorageCardInfo;
