import * as React from 'react';
import { Props, State } from './type';
import styled from 'styled-components'
import {rem} from '../style/function.style';
import {handleScheme} from '../utils/snailTargetHandler';
import { removeImgQuery } from '../utils/imgResize'
import { BaseComponent } from '../base-component'

const BannerContainer = styled.div`
  height: ${rem(136)};
  white-space: nowrap;
  overflow-x: auto;
  padding: ${rem(32)} ${rem(32)} ${rem(32)} ${rem(32)};
  &::-webkit-scrollbar{
    display: none;
  }
  .item{
    display: inline-block;
    width: ${rem(212)};
    height: ${rem(136)};
    border-radius: ${rem(16)};
    margin-right: ${rem(25)};
    background-color: #ececec;
    background-size: 100% auto;
    background-size: cover;
    &:last-of-type{
      margin-right: 0;
    }
  }
`

export class BannerSlider extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();

  itemClick(item){
    if(item && item.target){
      const {isEdit} = this.props;
      handleScheme(
        {
          target: item.target, 
          logPointId: null, 
          logQuery: null, 
          isEdit
        }
      );
    }
  }
  
  render() {
    const {banners, style} = this.props;
    return (
      <BannerContainer style={style}>
        <BaseComponent {...this.props}>
          {
            banners.length && banners.map((item, index) => (
              <li 
                key={index} 
                className="item" 
                style={
                  {
                    backgroundImage: item && item.imageObj && 
                      `url(${item.imageObj.url.slice(-3) === 'gif' ? item.imageObj.url : removeImgQuery(item.imageObj.url) + '?imageView&thumbnail=212y136'})`
                  }
                }
                onClick={this.itemClick.bind(this, item)}
              ></li>
            ))
          }
          {
            !banners.length && '至少配置一个banner'
          }
        </BaseComponent>
      </BannerContainer>
    )
  }
}