import React, { memo } from 'react';
import { Carousel } from 'zarm';
import styles from './index.less';
import { ICarouselConfig } from './schema';
import logo from 'editorAssets/01-轮播.png';
import { getLink } from 'editorUtils/tool';

const XCarousel = memo((props: ICarouselConfig) => {
  const { direction, swipeable, autoPlay, isTpl, imgList, index } = props;
  const contentRender = () => {
    return imgList.map((item, i) => {
      return (
        <div className={styles.carousel__item__pic} key={+i}>
          <a href={item.link}>
            <img style={{ width: '100%', display: 'block' }} src={item.imgUrl.length > 0 ? item.imgUrl[0].url : ''} alt="" />
          </a>
        </div>
      );
    });
  };

  const getHtml = () => {
    let html = '<div id="LWJ_BASE_MODULEbanner" data-size="无" style="padding: 0;" class="lwj-base-module-main home_banner copyItem noautomoveout" module_key="lwj_base_module_banner"><ul class="ullit" style="z-index: 1;">';
    imgList.map((item, i) => {
      html += '<li class="bannerItem" style="background-image: url(' + (item.imgUrl.length > 0 ? item.imgUrl[0].url : "") + '); background-size: cover;opacity: 1; display: list-item;">\n' +
        '<a rel="nofollow" href=' + item.link + ' target="_blank">小清新</a>\n' +
        '</li>';
    });
    html += '</ul></div>';
    return html;
  }

  const itemRender = () => {
    return imgList.map((img, i) => {
      return (
        <li className="bannerItem" style={{ backgroundImage: 'url(' + (img.imgUrl.length > 0 ? img.imgUrl[0].url : "") + ')', backgroundSize: 'cover', opacity: 1, display: 'list-item' }}>
          <a
            className={(img?.clickHref && img?.clickHref.includes('kefu')) ? 'callService_meiqia_liweijia' : ''}
            data-wxdizhi={(img?.clickHref && img?.clickHref.includes('wxapp') && img?.wxapplink == "wxapplink") ? img.wxapplink : ""}
            target={img?.openType == "currentPage" ? '_self' : '_blank'}
            href={(img?.clickHref && img?.clickHref.includes('link') && img?.link) ? getLink(img.link) : 'javascript:;'}>
            {img?.title}
          </a>
        </li>
      );
    });
  }
  return (
    <>
      {isTpl ? (
        <div className={styles.carousel__item__pic}>
          <img src={logo} alt="" />
        </div>
      ) : (
          <div
            style={{
              overflow: 'hidden',
              position: 'absolute',
              width: '100%',
              height: 'inherit',
              borderRadius: props.baseRadius,
              transform: `translate(${props.baseLeft}px,${props.baseTop}px)
                        scale(${props.baseScale / 100})
                        rotate(${props.baseRotate}deg)`,
            }}
          >
            <Carousel
              onChange={index => {
                // console.log(`onChange: ${index}`);
              }}
              direction={direction}
              swipeable={swipeable}
              autoPlay={autoPlay}
              loop
              className='__home_banner__'
              data-html={getHtml()}
              style={{ height: 'inherit' }}
            >
              {contentRender()}
            </Carousel>
            <div id="LWJ_BASE_MODULEbanner" data-size="无" style={{ padding: 0, display: 'none' }}
              className={`lwj-base-module-main home_banner copyItem noautomoveout banner${index}`}>
              <ul className="ullit" style={{ zIndex: 1 }}>
                {itemRender()}
              </ul>
            </div>
          </div>
        )}
    </>
  );
});

export default XCarousel;