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 { fareattr, farerule } = this.props
    const { match } = this.props
    return (
      <StyledBox>
      <h1 className="title">Fare</h1>
      <div className="columns">
        <div className="column is-6">
          <nav className="level is-mobile">
            <p className="level-item has-text-centered">
              <Link className="link is-info" to={`${match.url}/rules/new`}>
                <i className="fas fa-plus" /> New fare rule
              </Link>
            </p>
          </nav>
          {fareattr.results && Object.keys(farerule.results).map(i => (
          <FakeRow className="level panel" key={fareattr.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}/${fareattr.results[i].fare_id}`}>{fareattr.results[i].fare_id}</Link></p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Origin ID</p>
                <p className="title">{fareattr.results[i].origin_id}</p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Destination ID (or contains)</p>
                <p className="title">
                  {fareattr.results[i].destination_id}
                  {fareattr.results[i].contains_id}
                </p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Route ID</p>
                <p className="title">
                  {fareattr.results[i].route_id}
                </p>
              </div>
            </div>
          </FakeRow>
          ))}
        </div>


        <div className="column is-6">
          <nav className="level is-mobile">
            <p className="level-item has-text-centered">
              <Link className="link is-info" to={`${match.url}/attributes/new`}>
                <i className="fas fa-plus" /> New fare attributes
              </Link>
            </p>
          </nav>
          {fareattr.results && Object.keys(fareattr.results).map(i => (
          <FakeRow className="level panel" key={fareattr.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}/${fareattr.results[i].fare_id}`}>{fareattr.results[i].fare_id}</Link></p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Price</p>
                <p className="title">{fareattr.results[i].price}</p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Currency</p>
                <p className="title">{fareattr.results[i].currency_type}</p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Payment Method</p>
                <p className="title">{fareattr.results[i].payment_method}</p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Transfer</p>
                <p className="title">{fareattr.results[i].transfer}</p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Duration</p>
                <p className="title">{fareattr.results[i].transfer_duration}</p>
              </div>
            </div>
            <div className="level-item has-text-centered">
              <div>
                <p className="heading">Agency</p>
                <p className="title">{fareattr.results[i].agency_id}</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;
`