import React, { memo } from 'react';
import styles from './index.less';
import { IListConfig } from './schema';
import logo from 'editorAssets/07-列表.png';
import { StateWithHistory } from 'redux-undo';
// import { Dispatch } from 'umi';
import { connect } from 'dva';
const List = memo((props: IListConfig) => {
  const { round, sourceData, imgSize, fontSize, color } = props;
  const containerRef = React.useRef(null);
  React.useEffect(() => {
    const { clientHeight = 0, parentElement } = containerRef.current || {};
    if (clientHeight && parentElement ) {
      // parentElement.style.height = clientHeight + "px"

      props.dispatch({
        type: 'editorModal/updateH',
        payload: {
          h: clientHeight/2,
          id: parentElement.id
          // id: uuid(6, 10),
          // item,
          // point: { i: `x-${pointData.length}`, x: 0, y: gridY, w, h: item.h, isBounded: true },
          // status: 'inToCanvas',
        },
      });
    }
  }, []);

  return (
    <>
      {props.isTpl && (
        <div>
          <img src={logo} alt="" />
        </div>
      )}
      {!props.isTpl && (
        <div
          ref={containerRef}
          className={styles.list}
          style={{
            overflow: 'hidden',
            position: 'absolute',
            width: `${props.baseWidth}%`,
            // height: `${props.baseHeight}%`,
            borderRadius: props.baseRadius,
            transform: `translate(${props.baseLeft}px,${props.baseTop}px)
      scale(${props.baseScale / 100})
      rotate(${props.baseRotate}deg)`,
          }}
        >
          <div className={styles.sourceList}>
            {sourceData.map((item, i) => {
              return (
                <div className={styles.sourceItem} key={i}>
                  <div className={styles.imgWrap}>
                    <img
                      src={
                        item.imgUrl[0]
                          ? item.imgUrl[0].url
                          : 'http://io.nainor.com/uploads/01_173e15d3493.png'
                      }
                      alt={item.desc}
                      style={{
                        width: parseFloat(imgSize),
                        height: imgSize + 'px',
                        objectFit: 'cover',
                        borderRadius: round,
                      }}
                    />
                  </div>
                  <div className={styles.content}>
                    <a
                      className={styles.tit}
                      style={{ fontSize, color }}
                      href={item.link ? item.link : '#'}
                    >
                      {item.title}
                      <div
                        className={styles.desc}
                        style={{ fontSize: fontSize * 0.8, color: 'rgba(0,0,0, .3)' }}
                      >
                        {item.desc}
                      </div>
                    </a>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </>
  );
});

// export default List;
export default connect((state: StateWithHistory<any>) => ({
  // pstate: state.present.editorModal,
  // cstate: state.present.editorPcModal,
}))(List);