// Components
import { Button, Popover, Upload } from 'antd';
import { CheckCircleFilled, ImportOutlined } from '@ant-design/icons';
import { FONT_SIZE_SMALL_ICON } from 'components/constants';

// Types
import { EActionType } from 'components/DashboardTable/types';
import { TCommonMessages, useCommonMessages } from 'components/i18n';
import { TypeActionButtonsConfig } from './types';

// App
import { showConfirmModal } from 'components/Modals/ConfirmModal/ConfirmModal';

const useActionsWithSelectedCards = (
  buttonsActions: TypeActionButtonsConfig[] | null,
): Array<JSX.Element | null> | null => {
  const file = new FormData();
  const {
    confirmText: { ok, cancel },
    collectiveActionsMessages,
  }: TCommonMessages = useCommonMessages();

  type TypeButtonAction = {
    [key in EActionType]: (props: TypeActionButtonsConfig) => {
      key: string;
      component: JSX.Element;
    } | null;
  };

  // Набор дефолтных кнопок которые определяются через поле actionType
  const BUTTONS_ACTION: TypeButtonAction = {
    [EActionType.Upload]: (props) => {
      const Icon = props?.icon || ImportOutlined;
      return props?.hasSelected || props.alwaysVisible
        ? {
            key: EActionType.Upload,
            component: (
              <Upload
                showUploadList={false}
                customRequest={async (value) => {
                  const fileName = props.filename || 'uploaded_file';
                  await file.append(fileName, value.file);
                  showConfirmModal({
                    title:
                      props?.confirmMessage ||
                      collectiveActionsMessages.imports.title,
                    okType: 'danger',
                    okText: ok,
                    cancelText: cancel,
                    action: () => props.action(file as FormData),
                  });
                }}
                accept={props.accept || ''}
              >
                <Button
                  type="link"
                  icon={<Icon style={{ fontSize: FONT_SIZE_SMALL_ICON }} />}
                />
              </Upload>
            ),
          }
        : null;
    },
    [EActionType.SpecificAction]: (props) => {
      const Icon = props?.icon || CheckCircleFilled;
      return props?.hasSelected || props.alwaysVisible
        ? {
            key: EActionType.SpecificAction,
            component: (
              <Button
                icon={<Icon style={{ fontSize: FONT_SIZE_SMALL_ICON }} />}
                type="link"
                onClick={() => {
                  showConfirmModal({
                    title:
                      collectiveActionsMessages[props.translationsKey].title,
                    okType: 'danger',
                    okText: ok,
                    cancelText: cancel,
                    action: props.action,
                  });
                }}
              />
            ),
          }
        : null;
    },
  };

  if (buttonsActions === null) return null;

  return buttonsActions.map(({ actionType, popoverMessage, ...props }) => {
    const element = BUTTONS_ACTION?.[actionType](
      props as TypeActionButtonsConfig,
    );
    return (
      <Popover
        key={props.name}
        content={
          popoverMessage ||
          collectiveActionsMessages[props.translationsKey].popoverTitle
        }
      >
        {element?.component}
      </Popover>
    );
  });
};

export default useActionsWithSelectedCards;
