import React, { Component } from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

import { getCalendar } from '../actions/calendar'
import store from '../store'


const StyledBox = styled.div`
padding: 1rem;
background: #fafafa;
`

const GapBox = styled.span`
margin-right: 5px;
color: ${props => props.checked ? 'green' : 'gray'};;
`

const FakeRow = styled.nav`
padding-top: 5px;
padding-bottom: 5px;
background: white;
margin-bottom: 1rem;
`


const CheckboxIcon = (props) => (
  <GapBox checked={props.checked}>
  {props.checked === true && <span><i className="fas fa-check-square"></i></span>}
  {props.checked !== true && <span><i className="fas fa-square"></i></span>}
  </GapBox>
)

class FareList extends Component {

  componentWillMount() {
    const { count } = this.props.fareattr
    if (count === 0)
      store.dispatch(getCalendar())
  }

  render() {
    const { results } = this.props.fareattr
    const { match } = this.props
    return (
      <StyledBox>
      <h1 className="title">Fare</h1>
      <div className="columns">
        <div className="column is-12">
          <nav className="level is-mobile">
            <p className="level-item has-text-centered">
              <Link className="link is-info" to={`${match.url}/new`}>
                <i className="fas fa-plus" /> New fare
              </Link>
            </p>
          </nav>
          {results && Object.keys(results).map(i => (
          <FakeRow className="level panel" key={results[i].fare_id}>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Fare ID</p>
                <p className="title"><Link to={`${match.url}/${results[i].fare_id}`}>{results[i].fare_id}</Link></p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Start</p>
                <p className="title">{results[i].start_date}</p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">End</p>
                <p className="title">{results[i].end_date}</p>
              </div>
            </div>
          </FakeRow>
          ))}
        </div>
      </div>
      </StyledBox>
    )
  }
}

const mapStateToProps = state => ({
  farerule: state.farerule,
  fareattr: state.fareattr,
})
const connectFareList = connect(
  mapStateToProps,
  {},
)(FareList)

export default styled(connectFareList)`
  color: palevioletred;
  font-weight: bold;
`