import styled from 'styled-components'
import React, { Component } from 'react'
import { SelectWrapper } from 'infrastructure/components/Forms'

const DEFAULT_PER_ROW = 2
const EL = Array.from('123456789012')

class CampaignGenerator extends Component {
  state = {
    perRow: DEFAULT_PER_ROW
  }

  handlePerRowChange = perRow => {
    this.setState({ perRow })
  }

  render() {
    const { perRow } = this.state

    return (
      <Viewport>
        <div style={{width: '200px'}}>
          <SelectWrapper style={{ width: '200px' }} value={perRow} options={[
            { value: 1, label: '1 item per row' },
            { value: 2, label: '2 items per row' },
            { value: 3, label: '3 items per row' },
            { value: 4, label: '4 items per row' },
            { value: 5, label: '5 items per row' }
          ]} onChange={this.handlePerRowChange} />
        </div>
        <Page columns={perRow} rows={Math.ceil(EL.length / perRow)}>
          {EL.map(i => {
            return <Item />
          })}
        </Page>
      </Viewport>
    )
  }
}

CampaignGenerator.displayName = 'CampaignGenerator'

export default CampaignGenerator

const Viewport = styled.div`
  min-height: 100%;
  background-color: #eee;
`

const Page = styled.div`
  box-sizing: border-box;
  min-height: 100%;
  margin: 0 auto;
  padding: 2em;
  max-width: 800px;
  font-size: 1.2em;
  background-color: white;
  border: double 3px #DDD;
  border-top: none;
  border-bottom: none;
  display: grid;
  grid-template-columns: ${props => `repeat(${props.columns}, 1fr)`};
  grid-template-rows: ${props => `repeat(${props.rows}, 150px)`};
  grid-gap: 1rem;
`

const Item = styled.div`
  border: 6px solid #171717;
  background-color: #1EAAFC;
`