import React, { useEffect, useState } from 'react';
import { Button, Drawer, Input } from 'antd';
import { NavLink } from 'react-router-dom';
import { CloseOutlined, FullscreenOutlined } from '@ant-design/icons';
import { group } from './constants';
import { EventJournalGroupName } from './types';
import moment from 'moment';
import styles from './EventCardInfo.module.scss';

const defaultGroup: (
  | EventJournalGroupName.Main
  | EventJournalGroupName.Source
  | EventJournalGroupName.Recipient
  | EventJournalGroupName.Device
  | EventJournalGroupName.Additionally
)[] = [
  EventJournalGroupName.Main,
  EventJournalGroupName.Source,
  EventJournalGroupName.Recipient,

  EventJournalGroupName.Device,
  EventJournalGroupName.Additionally,
];

const EventCardInfo = ({
  cardInfo,
  translations,
  setCardInfo,
  isLarge = true,
}: {
  cardInfo: any;
  translations?: any;
  setCardInfo: React.Dispatch<React.SetStateAction<boolean>>;
  isLarge?: boolean;
}): JSX.Element => {
  const [visibleCardInfo, setVisibleCardInfo] = useState(false);
  const [isLargeCardWidth, setIsLargeCardWidth] = useState(false);
  useEffect(() => {
    setVisibleCardInfo(true);
  }, [cardInfo]);

  const [childrenDrawer, setChildrenDrawer] = useState(false);

  const showChildrenDrawer = (): void => {
    setChildrenDrawer(true);
  };

  const renderCard = (
    elem: EventJournalGroupName,
    item: string[],
    field: string,
    cardInfoData: any,
    cardWidth: boolean,
  ): JSX.Element => {
    const cardWidthStyle = cardWidth
      ? 'wrapper_group-event-container-large'
      : 'wrapper_group-event-container-small';

    return field === 'cs1Label' || field === 'cs2Label' ? (
      <div className={styles[cardWidthStyle]} key={`${item}+ ${field}`}>
        <span className={styles[`${cardWidthStyle}__title`]}>
          {cardInfoData[field]}
        </span>
        <Input
          className={styles[`${cardWidthStyle}__input`]}
          value={field === 'cs1Label' ? cardInfo?.cs1 : cardInfo?.cs2}
          disabled
        />
      </div>
    ) : (
      <div className={styles[cardWidthStyle]} key={`${item}+ ${field}`}>
        <span className={styles[`${cardWidthStyle}__title`]}>
          {translations[elem]?.[field]}
        </span>
        <Input
          className={styles[`${cardWidthStyle}__input`]}
          value={cardInfo[field]}
          disabled
        />
      </div>
    );
  };

  const setWidth = (): void => {
    setIsLargeCardWidth(true);
  };

  const parentDrawer = (): void => {
    setCardInfo(false);
    setVisibleCardInfo(false);
    setIsLargeCardWidth(false);
  };

  const renderCtaBlock = (): JSX.Element => {
    return (
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <NavLink to="#">Перейти в связанный Ассет</NavLink>
        <Button
          style={{
            marginLeft: 30,
          }}
          onClick={showChildrenDrawer}
          type="primary"
        >
          Добавить в инцидент
        </Button>
      </div>
    );
  };

  const renderEventsGroup = (): JSX.Element => (
    <Drawer
      closable={false}
      mask={false}
      width={isLargeCardWidth ? '100%' : '520px'}
      visible={visibleCardInfo}
      getContainer={false}
      style={{
        position: 'absolute',
        right: 0,
        height: '93%',
        transform: !isLargeCardWidth
          ? `translateX(${childrenDrawer ? -400 : 0}px)`
          : '0px',
      }}
      height={150}
      headerStyle={
        !isLargeCardWidth ? { background: 'rgba(176, 183, 193, 0.35)' } : {}
      }
      title={
        <div className={styles['cardHeader']}>
          <span className={styles['cardHeader_title']}>{`${
            translations?.title
          } ID ${cardInfo?.event_id?.split('-')[0]}`}</span>
          <div className={styles['cardHeader_date']}>
            {!isLargeCardWidth &&
              moment(cardInfo.event_first, moment.ISO_8601).format(
                'DD.MM.YYYY hh:mm:ss',
              )}
          </div>
          {/* Todo раскоменнить когда будет добавлена логика*/}
          {/*<div>{isLargeCardWidth && renderCtaBlock()}</div>*/}
          <div className={styles['cardHeader_icon-block']}>
            {!isLargeCardWidth && isLarge && (
              <FullscreenOutlined
                className={styles['cardHeader_icon-block-moreInfo']}
                onClick={setWidth}
              />
            )}
            {!isLargeCardWidth ? (
              <CloseOutlined
                className={styles['cardHeader_icon-block-closeIcon']}
                onClick={parentDrawer}
              />
            ) : (
              <Button type="primary" onClick={parentDrawer}>
                Закрыть
              </Button>
            )}
          </div>
        </div>
      }
      placement="right"
      // Todo раскоменнить когда будет добавлена логика
      // footer={!isLargeCardWidth && renderCtaBlock()}
    >
      {defaultGroup.map((groupName) => (
        <div
          key={groupName}
          style={{
            display: 'flex',
            flexDirection: 'column',
            marginBottom: 20,
          }}
        >
          <span className={styles['wrapper_group-title']}>
            {translations && translations[groupName].title}
          </span>
          <div className={styles['wrapper_group-event-container']}>
            {group[groupName].map((item) =>
              item.map((field) => {
                if (field in cardInfo && field !== 'cs2' && field !== 'cs1') {
                  if (cardInfo[field] || cardInfo[field] === 0) {
                    return renderCard(
                      groupName,
                      item,
                      field,
                      cardInfo,
                      isLargeCardWidth,
                    );
                  } else {
                    return null;
                  }
                } else {
                  return null;
                }
              }),
            )}
          </div>
        </div>
      ))}
    </Drawer>
  );

  return <div className={styles['wrapper']}>{renderEventsGroup()}</div>;
};

export default EventCardInfo;
