import React, { FC, useState } from 'react';
import styled from '@emotion/styled';

import { PreviewGroupPreview } from 'rc-image/lib/PreviewGroup';
import Image from '../image';
import defaultImg from './defaultImg';

const ImgWrapper = styled.span<{ width?: number | string }>`
  position: relative;
  display: block;
  width: ${({ width }) => (typeof width === 'string' ? width : `${width}px`)};
  min-width: 40px;
  max-width: 100%;
  overflow: hidden;
  background: rgb(255 255 255);
  border: 1px solid rgba(225, 227, 229, 1);
  border-radius: 4px;

  img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    color: #637381;
  }

  ::after {
    display: block;
    padding-bottom: 100%;
    content: '';
  }
`;

const ImageMask = styled.div`
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;

  :hover {
    opacity: 1;
  }
`;

const ImageQuantity = styled.div`
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 12px;
`;

export interface ThumbnailProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** 图片链接 */
  src?: string;
  /** 多张图片预览链接 */
  previewList?: string[];
  /** 图片宽度 */
  width?: number | string;
  /** 预览图片继承 previewType ，为 false 时关闭预览 */
  preview?: boolean | Omit<PreviewGroupPreview, 'visible' | 'onVisibleChange'>;
  /** 图片加载之前的占位符 */
  alt?: string;
  /** 显示预览多张图片的数字 */
  showCount?: boolean;
}

const Thumbnail: FC<ThumbnailProps> = ({
  alt = '...',
  src,
  width = 60,
  preview = true,
  previewList,
  showCount = true,
  ...props
}) => {
  const [errSrc, setErrSrc] = useState(false);
  const [visiblePreview, setVisiblePreview] = useState(false);

  return (
    <>
      <ImgWrapper
        width={width}
        onClick={e => {
          e.preventDefault();
          e.stopPropagation();
          props.onClick?.(e);
        }}
        {...props}
      >
        <img alt={alt} src={errSrc || !src ? defaultImg : src} onError={() => setErrSrc(true)} />
        {preview && (
          <ImageMask onClick={() => setVisiblePreview(true)}>
            <svg
              fill="currentColor"
              focusable="false"
              height="20px"
              viewBox="64 64 896 896"
              width="20px"
            >
              <path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" />
            </svg>
            {previewList?.length && showCount ? (
              <ImageQuantity>{previewList.length}</ImageQuantity>
            ) : null}
          </ImageMask>
        )}
      </ImgWrapper>

      {preview && visiblePreview && (
        <span onClick={e => e.stopPropagation()}>
          <Image.PreviewGroup
            preview={{
              visible: visiblePreview,
              onVisibleChange: visible => setVisiblePreview(visible),
              ...(typeof preview === 'object' && preview),
            }}
          >
            {previewList && previewList?.length > 0 ? (
              previewList.map((item, index) => (
                // eslint-disable-next-line react/no-array-index-key
                <Image wrapperStyle={{ display: 'none' }} key={index} src={item || defaultImg} />
              ))
            ) : (
              <Image
                src={src || defaultImg}
                preview={{
                  visible: visiblePreview,
                  onVisibleChange: visible => setVisiblePreview(visible),
                }}
                wrapperStyle={{ display: 'none' }}
              />
            )}
          </Image.PreviewGroup>
        </span>
      )}
    </>
  );
};

export default Thumbnail;