import * as React from 'react';
import { Props, State } from './type';
import * as Styled from './index.style'
import { BaseComponent } from '../base-component' 

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

  public render() {
    let { style, type, shelfData, marginTop} = this.props
  return (
    <Styled.ShelfContainer style={style}>
      <BaseComponent {...this.props} >
        <div className={marginTop && 'f-before'}>
          <div style={{marginTop: `${marginTop}rem`}}>
            <div className={`shelf-${type} shelf-list f-cb`}>
              {
                type == '1' &&
                shelfData.map((shelf, index) => {
                  if(index > 0) return null
                  return (
                    <a key={index} className="shelf-item f-cb" href={shelf.link} style={{backgroundImage: `url(${shelf.backgroundImage ? shelf.backgroundImage.url : ''})`, backgroundColor: `${shelf.backgroundColor ? shelf.backgroundColor : '#FFF'}`}}>
                      <span className="icon f-fl"></span>
                      <span className="text1 f-fl">{shelf.text1}</span>
                      <span className="text2 f-fl">{shelf.text2}</span>
                      <span className="go-to f-fl"></span>
                    </a>
                  )
                })
              }

              {
                type == '2' &&
                shelfData.map((shelf, index) => {
                  if(index > 1) return null
                  return (
                    <a key={index} className="shelf-item f-fl f-cb" href={shelf.link} style={{backgroundImage: `url(${shelf.backgroundImage ? shelf.backgroundImage.url : ''})`, backgroundColor: `${shelf.backgroundColor ? shelf.backgroundColor : '#FFF'}`}}>
                      <img className="f-fl" src={shelf.image ? shelf.image.url : ''}></img>
                      <div className="f-fl f-cb">
                        <div className="f-cb">
                          <span className="text1 f-fl">{shelf.text1}</span>
                          <span className="go-to f-fl"></span>
                        </div>
                        <div className="text2">{shelf.text2}</div>
                      </div>
                    </a>
                  )
                })
              }

              {
                type == '3' &&
                shelfData.map((shelf, index) => {
                  if(index > 2) return null
                  return (
                    <a key={index} className="shelf-item f-fl" href={shelf.link} style={{backgroundImage: `url(${shelf.backgroundImage ? shelf.backgroundImage.url : ''})`, backgroundColor: `${shelf.backgroundColor ? shelf.backgroundColor : '#FFF'}`}}>
                      <img src={shelf.image ? shelf.image.url : ''}></img>
                      <div className="text-w">
                        <div className="text2">{shelf.text2}</div>
                        <div className="text1">{shelf.text1}</div>
                      </div>
                    </a>
                  )
                })
              }
            </div>
          </div>
        </div>
      </BaseComponent>
    </Styled.ShelfContainer>
  )
  }
}