import _ from 'lodash';
import React, { useEffect, useState } from 'react';

import fullImg from './assets/full.png';
import nextImg from './assets/next.png';
import prevImg from './assets/prev.png';
import { handleFullScreen } from './ImgPreview';
import { ImgWrapper } from './styled';

interface TouchBarPictureProps {
  size?: Record<string, any>;
  img: string;
  title?: string;
  data?: Record<string, any>[];
}

const EchartsItem = (props: TouchBarPictureProps) => {
  const {
    size,
    img = 'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/8526e32d-e32b-4782-982d-b2490c80bd0b.png',
    title,
    data,
  } = props;

  const styleBase = {
    width: '100%',
    height: 200,
  };

  const [currentTitle, setCurrentTitle] = useState(getCurrentData().title);
  const [currentImg, setCurrentImg] = useState<string>(getCurrentData().img);
  const [isMultiple, setIsMultiple] = useState(false);
  const [imgArray, setImgArray] = useState<string[]>([]);

  function getCurrentData() {
    const dataSourceText =
      data && data.length ? data[0] && data[0].title : null;
    const dataSourceImg = data && data.length ? data[0] && data[0].img : null;
    const _title =
      typeof dataSourceText !== 'undefined' && dataSourceText !== null
        ? dataSourceText
        : title;
    const _img =
      typeof dataSourceImg !== 'undefined' && dataSourceImg !== null
        ? dataSourceImg
        : img;
    return {
      title: _title,
      img: _img,
    };
  }

  useEffect(() => {
    const { title, img } = getCurrentData();
    setCurrentTitle(title);
    if (img && img.includes(',')) {
      const array = img.split(',');
      setIsMultiple(true);
      setCurrentImg(array[0]);
      setImgArray(array);
    } else {
      setIsMultiple(false);
      setCurrentImg(img);
      setImgArray([]);
    }
  }, [title, data, img]);

  function handlePrevClick() {
    const currentIndex = imgArray.indexOf(currentImg);
    const len = imgArray.length;
    if (currentIndex - 1 < 0) {
      setCurrentImg(imgArray[len - 1]);
    } else {
      setCurrentImg(imgArray[currentIndex - 1]);
    }
  }

  function handleNextClick() {
    const currentIndex = imgArray.indexOf(currentImg);
    const len = imgArray.length;
    if (currentIndex + 1 >= len) {
      setCurrentImg(imgArray[0]);
    } else {
      setCurrentImg(imgArray[currentIndex + 1]);
    }
  }

  const style = _.merge(styleBase, size);

  return (
    <ImgWrapper style={style}>
      <img src={currentImg} />
      {isMultiple ? (
        <img src={prevImg} onClick={handlePrevClick} className="switch prev" />
      ) : null}
      {isMultiple ? (
        <img src={nextImg} onClick={handleNextClick} className="switch next" />
      ) : null}
      <div className="addr">
        <span title={currentTitle} className="desc">
          {currentTitle}
        </span>
        <span
          onClick={() => handleFullScreen(currentImg, imgArray)}
          className="full"
        >
          <img src={fullImg} />
        </span>
      </div>
    </ImgWrapper>
  );
};

export default EchartsItem;