import React, { memo } from 'react';
import { IImageConfig } from './schema';
import './index.less';
import {
  TDataListDefaultTypeItem1,
} from 'editorCore/FormComponents/types';
import LinkBox from './components/LinkBox';
import Child from './components/Child';

const Image = memo((props: IImageConfig) => {
  const {
    imgUrl,
    round = 0,
    translate,
    align,
    titText,
    titFontSize,
    titColor,
    titFontWeight,
    subTitText,
    subTitFontSize,
    subTitColor,
    subTitFontWeight,
    imgList,
    jumpStyle,
  } = props;

  const src = imgUrl?.[0]?.url ?? imgUrl?.[0]?.imgUrl?.[0]?.url

  return (
    <>
      {props.isTpl && (
        <div>
          <img
            style={{ width: '100%' }}
            src="https://static.liweijia.com/site-php/upload/content/710e3f34783f3441ee04c21dd5bd142f.jpg"
            alt=""
          />
        </div>
      )}
      {!props.isTpl && (
        <div
          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
            style={{
              borderRadius: round,
              width: '100%',
              textAlign: 'center',
              overflow: 'hidden',
              position: 'relative',
            }}
          >
            <div
              style={{
                position: 'absolute',
                width: '100%',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                marginLeft: translate && translate[0],
                marginTop: translate && translate[1],
                textAlign: align,
              }}
            >
              <div style={{ fontSize: titFontSize, color: titColor, fontWeight: +titFontWeight }}>
                {titText}
              </div>
              <div
                style={{
                  fontSize: subTitFontSize,
                  color: subTitColor,
                  fontWeight: +subTitFontWeight,
                  lineHeight: 2.6,
                }}
              >
                {subTitText}
              </div>
            </div>

            <LinkBox imgUrl={imgUrl} jumpStyle={jumpStyle}>
              <img src={src} alt="" style={{ width: '100%' }} />
            </LinkBox>
            {imgList &&
              imgList.length > 0 &&
              imgList.map((img: TDataListDefaultTypeItem1) => { 
                return <Child isJump={props.jumpStyle === "source" || !props.jumpStyle} img={img}/>;
              })}
          </div>
        </div>
      )}
    </>
  );
});

export default Image;