import React, { FC, ReactType, useState } from 'react';
import { ImageProps } from '../../blocks/Image';
import Link, { LinkProps } from '../../blocks/Link';
import css from './index.module.css';
import Button from '../../blocks/Button';
import classNames from 'classnames';

export interface PartnerListProps {
  title?: string;
  items?: {
    id: string;
    title: string;
    LinkProps: LinkProps;
    Image: ReactType;
    ImageProps: ImageProps;
  }[];
}

const PartnerList: FC<PartnerListProps> = ({ items }) => {
  const [showAll, setShowAll] = useState(false);
  return (
    <>
      <ul
        className={classNames(css.partnerList__list, {
          [css.partnerList__listAll]: showAll,
        })}
      >
        {items &&
          items.map(item => {
            const isSvgImage =
              item.ImageProps.file.contentType === 'image/svg+xml';
            return (
              <li className={css.partnerList__item} key={item.id}>
                {item.LinkProps ? (
                  <Link
                    className={css.partnerList__itemWrap}
                    {...item.LinkProps}
                  >
                    {item.ImageProps && !isSvgImage && (
                      <item.Image
                        {...item.ImageProps}
                        className={css.partnerList__itemImage}
                      />
                    )}
                    {item.ImageProps && isSvgImage && (
                      <div
                        dangerouslySetInnerHTML={{
                          __html: item.ImageProps.svg.content,
                        }}
                        className={css.partnerList__itemImageSvg}
                      />
                    )}
                  </Link>
                ) : (
                  <div className={css.partnerList__itemWrap}>
                    {item.ImageProps && !isSvgImage && (
                      <item.Image
                        {...item.ImageProps}
                        className={css.partnerList__itemImage}
                      />
                    )}
                    {item.ImageProps && isSvgImage && (
                      <div
                        dangerouslySetInnerHTML={{
                          __html: item.ImageProps.svg.content,
                        }}
                        className={css.partnerList__itemImageSvg}
                      />
                    )}
                  </div>
                )}
              </li>
            );
          })}
      </ul>
      <div className={css.partnerList__button}>
        <Button
          variant={'secondary'}
          handleClick={(): void => {
            setShowAll(!showAll);
          }}
        >
          {showAll ? 'Show Less' : 'Show All'}
        </Button>
      </div>
    </>
  );
};

export default PartnerList;