import React, { FC, ReactNode } from 'react';
import css from '../../blocks/ModalRedesign/index.module.css';
import { Category } from '../PackageCategoryTab';
import { Button } from '../../index';
import IconLoader from '../../blocks/IconLoader';
import ArrowSVG from '../../assets/icons/icon-arrow-left.svg';
import Link from '../../blocks/Link';
import ModalRedesign from '../../blocks/ModalRedesign';

export interface CategoryModalProps {
  isOpen?: boolean;
  isLoading?: boolean;
  error?: string;
  children?: ReactNode;
  actions?: ReactNode;
  title?: string;
  selectedCategory: Category;
  onRequestClose: () => void;
  handleSelect: (slug: string) => void;
  Translations?: {
    showAll: string;
    showServices: string;
    title: string;
  };
}

const CategoryModal: FC<CategoryModalProps> = ({
  isOpen,
  selectedCategory,
  onRequestClose,
  handleSelect,
  Translations,
  ...rest
}) => {
  const sortSubCategoriesByScore = (a, b): number => {
    if (!!a.promotionScore && !!b.promotionScore) {
      return a.promotionScore > b.promotionScore ? -1 : 1;
    }
    if (!a.promotionScore && !b.promotionScore) {
      return 0;
    }
    if (!a.promotionScore) {
      return b.promotionScore > 0 ? 1 : -1;
    }
    if (!b.promotionScore) {
      return a.promotionScore > 0 ? -1 : 1;
    }
    return 0;
  };

  return (
    <ModalRedesign
      isOpen={isOpen}
      withAnimation={true}
      onRequestClose={onRequestClose}
      {...rest}
      {...{ closeTimeoutMS: 300 }}
    >
      {!!selectedCategory && (
        <>
          <div className={css.modal__titleWrapper}>
            <IconLoader
              name={
                selectedCategory.image
                  ? selectedCategory.image
                  : 'mila-icon-audio'
              }
              {...{ fill: 'black', height: '50px' }}
            />
            <div className={css.modal_categoryTitle}>
              {selectedCategory.name}
            </div>
            <h2>{Translations?.title}</h2>
          </div>

          <div className={css.modal__list}>
            {selectedCategory.subcategories
              .sort(sortSubCategoriesByScore)
              .map((item, _) => {
                return (
                  <div
                    className={css.modal__listItem}
                    key={item.milaInternalId}
                  >
                    <h3>{item.name}</h3>
                    <div>{item.description}</div>
                    <Button
                      variant={'secondary'}
                      handleClick={(): void => {
                        handleSelect(item.slug);
                      }}
                    >
                      {Translations?.showServices}
                    </Button>
                  </div>
                );
              })}
          </div>
        </>
      )}
      <Link
        onClick={(): void => {
          handleSelect('all');
        }}
        className={css.modal__showAll}
      >
        {Translations?.showAll} <ArrowSVG className={css.arrow__svg} />
      </Link>
    </ModalRedesign>
  );
};
export default CategoryModal;