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

import HorizontalInput from './parts/HorizontalInput'
import { updateRoute, createRoute, deleteRoute } from '../actions/route';
import store from '../store'

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

// TODO: need to deal with shapes

class RouteForm extends Component {

  state = {
    id: null,
    agency: null,
    route_id: "",
    short_name: "",
    long_name: "",
    desc: "",
    route_type: "2",
    route_url: "",
    route_color: "",
    route_text_color: "",
    route_sort_order: "0",
  }

  constructor() {
    super()
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleDelete = this.handleDelete.bind(this)
    this.renderForm = this.renderForm.bind(this)
  }

  handleChange(evt) {
    let updated = {}
    updated[evt.target.name] = evt.target.value
    this.setState(updated)
  }

  handleSubmit() {
    const { id } = this.state
    let body = { ...this.state }
    delete body.id
    delete body.farerule_set
    delete body.trip_set
    delete body.geojson
    if (id !== null) {
      store.dispatch(updateRoute(id, body))
    } else {
      store.dispatch(createRoute(body))
    }
    this.setState({justSubmit: true})
  }

  handleDelete() {
    const { id } = this.state
    store.dispatch(deleteRoute(id))
    this.setState({justSubmit: true})
  }

  componentWillMount() {
    const { props } = this
    const { agencyId, routeId } = props.match.params
    const { results } = props.route
    const ones = results.filter(ele => ele.route_id === routeId)
    if (ones.length > 0) {
      this.setState(ones[0])
      props.updateBreadcrumb({ agencyId, routeId })
    } else {
      const agencies = props.agency.results.filter(ele => ele.agency_id === agencyId)
      if (agencies.length > 0) {
        let d = {}
        d["agency_id"] = agencies[0].id
        this.setState(d)
        props.updateBreadcrumb({ agencyId, routeId: 'new' })
      }
    }
  }

  renderForm() {
    const one = this.state
    const { agencyId, routeId } = this.props.match.params
    const { agency } = this.props
    const agencies = agency.results.filter(ele => ele.agency_id === agencyId)
    const { fetching } = this.props.route
    return (
      <StyledRouteForm>
        <h1 className="title">{one.route_id || 'New Route'}&nbsp;&nbsp;</h1>
        <div className="content">
          <HorizontalInput
              label="Route ID"
              type="text"
              fieldName="route_id"
              value={one.route_id || ''}
            handleChange={this.handleChange} />

          <HorizontalInput
            label="Short Name"
            type="text"
            fieldName="short_name"
            value={one.short_name || ''}
            handleChange={this.handleChange} />

          <HorizontalInput
            label="Long Name"
            type="text"
            fieldName="long_name"
            value={one.long_name || ''}
            handleChange={this.handleChange} />

          <HorizontalInput
              label="Description"
              type="text"
              fieldName="desc"
              value={one.desc || ''}
              handleChange={this.handleChange} />

          <HorizontalInput
              label="Route Type"
              type="text"
              fieldName="route_type"
              value={one.route_type || ''}
              handleChange={this.handleChange} />

          <HorizontalInput
              label="Route URL"
              type="text"
              fieldName="route_url"
              value={one.route_url || ''}
              handleChange={this.handleChange} />

          <HorizontalInput
              label="Route Color"
              type="text"
              fieldName="route_color"
              value={one.route_color || ''}
              handleChange={this.handleChange} />

          <HorizontalInput
              label="Route Text Color"
              type="text"
              fieldName="route_text_color"
              value={one.route_text_color || ''}
              handleChange={this.handleChange} />

          <HorizontalInput
              label="Route Sort Order"
              type="text"
              fieldName="route_sort_order"
              defaultValue="0"
              value={one.route_sort_order || ''}
              handleChange={this.handleChange} />
        </div>

        <div className="field is-grouped">
          <div className="control">
            <button className="button is-link"
              onClick={this.handleSubmit}
              disabled={fetching}>
              Save</button>
          </div>
          {one.id !== null && <div className="control">
            <button className="button is-danger"
              onClick={this.handleDelete}
              disabled={fetching}>
              DELETE</button>
          </div>}
          <div className="control">
            {agencies[0] &&
            <Link to={`/map/${agencies[0].agency_id}/${routeId ? `route/${routeId}` : ''}`}
                className="button is-text">Cancel</Link>}
          </div>
        </div>
      </StyledRouteForm>
    )
  }

  render () {
    const one = this.state
    const { fetching } = this.props.agency
    // redirect to view page if no data
    const { agencyId } = this.props.match.params
    // redirect to agency list if submitted
    if (one.justSubmit === true && !fetching) {
      return <Redirect to={`/map/${agencyId}/route/${one.route_id || ''}`} />
    }
    return this.renderForm()
  }

}


const mapStateToProps = state => ({
  agency: state.agency,
  route: state.route,
})

const connectRouteForm = connect(
  mapStateToProps,
)(RouteForm)
export default connectRouteForm