import React, { useLayoutEffect, useRef, useState } from 'react';
import { Button } from '@easyv/antd';
import { Swiper, SwiperSlide } from 'swiper/react';
import sourceImg from 'images/sourceImg.png';
import 'swiper/swiper.less';
import 'swiper/components/pagination/pagination.less';
import { getAssetsUrl } from 'utils/utils';
import SwiperPointer from './SwiperPointer';
import styles from './index.less';

import SwiperCore, {
  Autoplay,
  Navigation,
  Pagination,
  Thumbs,
  Controller,
  Virtual,
} from 'swiper/core';
import { ComponentIcon } from 'components/IconButton';
import { useProductionInfo } from 'components/easyUse';

SwiperCore.use([Autoplay, Navigation, Pagination, Thumbs, Controller, Virtual]);

type MarketModalProps = {
  onCancel(): void;
  list: any[];
  addTemplate: (param) => void;
  defaultId: number;
  createBtnLoading: boolean;
  type: number;
};

export default function Preview({
  type,
  list,
  onCancel,
  addTemplate,
  defaultId,
  createBtnLoading,
}: MarketModalProps) {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const [thumbNum, setThumbNum] = useState(6);

  const productionInfo = useProductionInfo();
  const { isRenew = false } = productionInfo;

  useLayoutEffect(() => {
    const num = Math.floor(document.body.clientWidth / 160);
    setThumbNum(num);
  }, []);

  let initialIndex = list.findIndex((d) => d.id === defaultId);
  initialIndex = initialIndex > -1 ? initialIndex : 0;

  const mainDom = useRef(null);
  const handleClick = (e) => {
    if (e.target === mainDom.current) {
      onCancel();
    }
  };

  const getRenderIconText = (isRenew: boolean, measureType: 1 | 2 | 3 | 4) => {
    if (measureType === 1 || measureType === 4) {
      return '免费';
    }
    if (isRenew) {
      return measureType === 2 ? '企业版免费' : '开发版免费';
    }
    return measureType === 2 ? '高级版免费' : '尊享版免费';
  };

  // TODO 这里只是一个弹框预览就好了，不需要用到swiper，后续重写(目前先改造为list传当前选中的模板)

  return (
    <div className={styles.wrapper} onClick={handleClick}>
      <div className={styles.container} ref={mainDom}>
        <div className={styles.sliderWrapper}>
          <Swiper
            thumbs={{ swiper: thumbsSwiper, slideThumbActiveClass: styles.thumbActiveClass }}
            spaceBetween={0}
            slidesPerView={1}
            initialSlide={initialIndex}
            onSlideChange={() => {}}
            onReachEnd={() => {}}
            virtual>
            {list.map((item) => {
              return (
                <SwiperSlide
                  key={item.id}
                  className={styles.swiperItem}
                  onClick={(e) => {
                    e.stopPropagation();
                  }}>
                  {item.type === 2 && (
                    <video src={getAssetsUrl(`${item.content}`)} loop muted autoPlay />
                  )}
                  {item.type !== 2 && type === 0 && (
                    <img src={item.previewThumb || sourceImg} alt="" />
                  )}
                  {item.type !== 2 && type !== 0 && (
                    <img src={item.preview ? getAssetsUrl(`${item.preview}`) : sourceImg} alt="" />
                  )}
                  <div className={styles.bottom}>
                    <div className={styles.text}>
                      <div className={styles.title}>
                        <span className={styles.name}>{item.name}</span>
                        <span className={styles.iconWrapper}>
                          <ComponentIcon
                            renderType="layout"
                            style={{ padding: '5px 4px' }}
                            measureType={item.measureType}
                            isRenew={isRenew}
                            renderText={getRenderIconText(isRenew, item.measureType)}
                          />
                        </span>
                      </div>
                      <div className={styles.desc}>
                        <span>{item.info}</span>
                      </div>
                    </div>
                    {type === 0 && (
                      <Button
                        onClick={(e) => {
                          e.stopPropagation();
                          addTemplate(item);
                        }}
                        loading={createBtnLoading}
                        type="primary">
                        创建项目
                      </Button>
                    )}
                  </div>
                </SwiperSlide>
              );
            })}
          </Swiper>
        </div>
      </div>
      <div className={styles.sliderList}>
        <Swiper
          initialSlide={initialIndex}
          slidesPerView={thumbNum}
          watchSlidesVisibility
          watchSlidesProgress
          onSwiper={setThumbsSwiper}
          thumbs={{ slideThumbActiveClass: styles.thumbActiveClass }}>
          {list.map((item) => {
            return (
              <SwiperSlide key={`slide-${item.id}`} className={styles.item}>
                <SwiperPointer {...item} type={type} />
              </SwiperSlide>
            );
          })}
        </Swiper>
      </div>
    </div>
  );
}
