/** @format */

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

import { DispatchEvent } from '../../../utils';

const ImgWrapper = styled.div`
  .noRepeat {
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .reoeatX {
    background-repeat: repeat-x;
    background-size: auto 100%;
  }
  .reoeatY {
    background-repeat: repeat-y;
    background-size: 100% auto;
  }
  .repeat {
    background-repeat: repeat;
    background-size: auto;
  }
`;

interface SinglePictureProps {
  id: string;
  size?: {
    width: number;
    height: number;
  };
  img: string;
  borderRadius: number;
  repeatType: string;
  jumpType: string;
  linkUrl: string;
  data?: Record<string, any>[];
}

const EVENT_CLICK_EVENT_NAME = 'event-picture-click';

const SinglePicture = (props: SinglePictureProps) => {
  const {
    id,
    size,
    img,
    borderRadius = 0,
    repeatType = 'noRepeat',
    jumpType = 'current',
    linkUrl,

    data = [],
  } = props;

  function getCurrentValue() {
    const dataSourceValue =
      data && data.length ? data[0] && data[0].value : null;
    return typeof dataSourceValue !== 'undefined' && dataSourceValue !== null
      ? dataSourceValue
      : img;
  }

  const [currentValue, setCurrentValue] = useState(getCurrentValue());

  useEffect(() => {
    setCurrentValue(getCurrentValue());
  }, [img, data]);

  const defaultImg =
    'https://gt-toolbox.oss-cn-beijing.aliyuncs.com/gt-toolbox/8526e32d-e32b-4782-982d-b2490c80bd0b.png';
  const styleBase = {
    width: '100%',
    height: 200,
    overflow: 'hidden',
    borderRadius: borderRadius,
    backgroundImage: `url(${currentValue || defaultImg})`,
    cursor: linkUrl ? 'pointer' : '',
  };

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

  function handleImageClick() {
    if (linkUrl) {
      if (jumpType === 'current') {
        window.location.href = linkUrl;
      } else {
        window.open(linkUrl);
      }
    }
    // 抛出Edata点击事件，供后续隐藏显示图层
    DispatchEvent(id, EVENT_CLICK_EVENT_NAME, {
      id,
    });
  }

  return (
    <ImgWrapper>
      <div
        style={style}
        className={repeatType}
        onClick={handleImageClick}
      ></div>
    </ImgWrapper>
  );
};

export default SinglePicture;