import React, { FunctionComponent, useEffect, useMemo, useRef } from 'react';
import styles from './index.module.scss';


interface IProps {
  imgs: any,
  left: number,
  onChange: Function
  handleClick: Function,
}

const Component: FunctionComponent<IProps> = (props) => {
  const {
    imgs,
    left,
    onChange,
    handleClick
  } = props;

  const innerimg = useRef<HTMLDivElement>(null);
  const jzimg = useRef<HTMLImageElement>(null);


  const info = useMemo(() => {
    return [
      {
        id: 1,
        image: imgs.line_boat,
        cls: 'line_boat',
        msg: '独自荡舟江上，穿梭于山水之间，却不时回望',
        name: '船'
      },
      {
        id: 2,
        image: imgs.line_friends,
        cls: 'line_friends',
        msg: '亲友即将远行，送别者依依不舍',
        name: 'line_friends'
      },
      {
        id: 3,
        image: imgs.line_mount,
        cls: 'line_mount',
        msg: '洲渚之间，山水交融，美不胜收',
        name: 'line_mount'
      }
    ]
  }, [imgs])


  useEffect(() => {
    let temp = left
    if (innerimg.current && jzimg.current) {
      let innerW = window.innerWidth
      let innerImgW = innerimg.current.clientWidth
      let jzimgW = jzimg.current.clientWidth
      temp = Math.max(Math.min((innerImgW - innerW + jzimgW + 20), left), 0)
    }
    onChange(temp)
  }, [left])



  return (
    <div className={styles.Layout}>
      <img ref={jzimg} className='hjbg' src={imgs.img_juanzhou} alt="img_juanzhou" />
      <div className='inner'>
        <div className='innerimg'
          ref={innerimg}
          style={{ left: `-${left}px` }}>
          <img
            className='texture'
            src={imgs.img_texture} alt="img_texture" />
          {
            info.map(item => {
              return (
                <img key={item.id} onTouchEnd={(event) => {event.preventDefault(); handleClick(item) }} className={`gaoliang ${item.cls}`} src={item.image} alt={item.name} />
              )
            })
          }

        </div>
      </div>
    </div>
  );
};

export default Component;