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

import { session } from '../../../session'

import { TextInput, NumberInput, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
import { preloadImage } from '../../../util'

import * as tileActions from '../../tile/tile.actions'

const SELECT_TYPES = [
  "image", "text"
].map(s => ({ name: s, label: s }))

const ALIGNMENTS = [
  "top_left", "top_center", "top_right",
  "center_left", "center_center", "center_right",
  "bottom_left", "bottom_center", "bottom_right",
].map(align => ({
  name: align,
  label: align === 'center_center'
    ? 'center'
    : align.replace('_', ' ')
  }))

const REQUIRED_KEYS = {
  image: ['url'],
  text: ['content'],
}

// target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
// https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg

const newImage = (data) => ({
  settings: {
    ...newPosition(),
    is_tiled: false,
    url: "",
  },
  type: 'image',
  target_page_id: null,
  ...data,
})

const newText = (data) => ({
  settings: {
    ...newPosition(),
    content: "What is up... I have no idea actually",
    color: 'rgb(255,255,255)',
    width: 0,
    height: 0,
  },
  type: 'text',
  target_page_id: null,
  ...data,
})

const newPosition = () => ({
  x: 0, y: 0,
  width: 0, height: 0,
  rotation: 0, scale: 1,
  align: "center_center",
})

const TYPE_CONSTRUCTORS = {
  image: newImage,
  text: newText,
}

class TileForm extends Component {
  state = {
    title: "",
    submitTitle: "",
    errorFields: new Set([]),
  }

  componentDidMount() {
    const { graph, page, isNew, initialData } = this.props
    const title = isNew ? 'new tile' : 'editing tile'
    const submitTitle = isNew ? "Create Tile" : "Save Changes"
    this.setState({
      title,
      submitTitle,
      errorFields: new Set([]),
    })
    if (isNew) {
      this.props.tileActions.updateTemporaryTile(newImage({
        id: "new",
        graph_id: graph.show.res.id,
        page_id: page.show.res.id,
      }))
    } else {
      this.props.tileActions.updateTemporaryTile({ ...initialData })
    }
  }

  handleChange(e) {
    const { name, value } = e.target
    this.clearErrorField(name)
    this.props.tileActions.updateTemporaryTile({
      ...this.props.temporaryTile,
      [name]: value,
    })
  }

  handleTypeChange(type) {
    const { graph, page, temporaryTile } = this.props
    let newTile = TYPE_CONSTRUCTORS[type]({
      id: temporaryTile.id,
      graph_id: temporaryTile.graph_id,
      page_id: temporaryTile.page_id,
    })
    newTile.settings.align = temporaryTile.settings.align
    this.setState({ errorFields: new Set([]) })
    this.props.tileActions.updateTemporaryTile(newTile)
  }

  handleSettingsChange(e) {
    const { name, value } = e.target
    this.clearErrorField(name)
    this.props.tileActions.updateTemporaryTile({
      ...this.props.temporaryTile,
      settings: {
        ...this.props.temporaryTile.settings,
        [name]: value,
      }
    })
  }

  handleSelect(name, value) {
    this.clearErrorField(name)
    if (name === 'type') {
      return this.handleTypeChange(value)
    }
    this.props.tileActions.updateTemporaryTile({
      ...this.props.temporaryTile,
      [name]: value,
    })
  }

  handleSettingsSelect(name, value) {
    this.clearErrorField(name)
    this.props.tileActions.updateTemporaryTile({
      ...this.props.temporaryTile,
      settings: {
        ...this.props.temporaryTile.settings,
        [name]: value,
      }
    })
  }

  handleAlignment(name, value) {
    this.clearErrorField(name)
    this.props.tileActions.updateTemporaryTile({
      ...this.props.temporaryTile,
      settings: {
        ...this.props.temporaryTile.settings,
        [name]: value,
        x: 0, y: 0,
      }
    })
  }

  handleImageChange(e) {
    const { name, value } = e.target
    this.handleSettingsSelect(name, value)
    preloadImage(value).then(img => {
      console.log(img)
      this.props.tileActions.updateTemporaryTile({
        ...this.props.temporaryTile,
        settings: {
          ...this.props.temporaryTile.settings,
          [name]: value,
          width: img.naturalWidth,
          height: img.naturalHeight,
          x: 0, y: 0,
        }
      })
    })
  }

  clearErrorField(name) {
    const { errorFields } = this.state
    if (errorFields.has(name)) {
      errorFields.delete(name)
      this.setState({
        errorFields,
      })
    }
  }

  handleSubmit(e) {
    e.preventDefault()
    const { isNew, temporaryTile, onSubmit } = this.props
    const requiredSettings = REQUIRED_KEYS[temporaryTile.type]
    const validKeys = "id graph_id page_id target_page_id type settings".split(" ")
    const validData = validKeys.reduce((a,b) => { a[b] = temporaryTile[b]; return a }, {})
    const errorFields = requiredSettings.filter(key => !validData.settings[key])
    if (errorFields.length) {
      console.log('error', errorFields, validData)
      this.setState({ errorFields: new Set(errorFields) })
    } else {
      if (isNew) {
        // side effect: set username if we're creating a new tile
        // session.set('username', data.username)
        delete validData.id
      } else {
        validData.id = temporaryTile.id
      }
      console.log('submit', validData)
      onSubmit(validData)
    }
  }

  render() {
    const { temporaryTile, isNew } = this.props
    const { title, submitTitle, errorFields } = this.state
    if (!temporaryTile || !temporaryTile.settings) return <div className='box' />
    return (
      <div className='box'>
        <h1>{title}</h1>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <div className="row selects">
            <Select
              name='type'
              selected={temporaryTile.type}
              options={SELECT_TYPES}
              title=''
              onChange={this.handleSelect.bind(this)}
            />
            <Select
              name='align'
              selected={temporaryTile.settings.align}
              options={ALIGNMENTS}
              title=''
              onChange={this.handleAlignment.bind(this)}
            />
          </div>

          {this.renderPositionInfo()}

          {temporaryTile.type === 'image'
            ? this.renderImageForm()
          : temporaryTile.type === 'text'
            ? this.renderTextForm()
          : ""}

          <SubmitButton
            title={submitTitle}
            onClick={this.handleSubmit.bind(this)}
          />
          {!!errorFields.size &&
            <label>
              <span></span>
              <span>Please add the required fields =)</span>
            </label>
          }
        </form>
      </div>
    )
  }

  renderPositionInfo() {
    const { temporaryTile } = this.props
    const { x, y, width, height, rotation, scale } = temporaryTile.settings
    return (
      <div className='position'>
        {parseInt(x)}{', '}
        {parseInt(y)}{' '}
        {parseInt(width)}{'x'}{parseInt(height)}{' '}
        {rotation === 0 || <span>{parseInt(rotation * 180 / Math.PI)}{'\u00B0 '}</span>}
        {scale === 1 || <span>{'x'}{scale.toFixed(0.2)}</span>}
      </div>
    )
  }

  renderImageForm() {
    // const { isNew } = this.props
    const { temporaryTile } = this.props
    const { errorFields } = this.state
    return (
      <div>
        <TextInput
          title=""
          placeholder='http://'
          name="url"
          required
          data={temporaryTile.settings}
          error={errorFields.has('url')}
          onChange={this.handleImageChange.bind(this)}
          autoComplete="off"
        />
        <Checkbox
          label="Tiled"
          name="is_tiled"
          data={temporaryTile.settings}
          onChange={this.handleSettingsSelect.bind(this)}
          autoComplete="off"
        />
      </div>
    )
   
  }

  renderTextForm() {
    const { temporaryTile } = this.props
    const { errorFields } = this.state
    return (
      <div>
        <TextArea
          title=""
          name="content"
          required
          data={temporaryTile.settings}
          error={errorFields.has('content')}
          onChange={this.handleSettingsChange.bind(this)}
          autoComplete="off"
        />
        <div className='row pair'>
          <NumberInput
            title="Width"
            name="width"
            data={temporaryTile.settings}
            min={0}
            max={1200}
            error={errorFields.has('width')}
            onChange={this.handleSettingsChange.bind(this)}
            autoComplete="off"
          />
          <NumberInput
            title="Height"
            name="height"
            data={temporaryTile.settings}
            min={0}
            max={1200}
            error={errorFields.has('height')}
            onChange={this.handleSettingsChange.bind(this)}
            autoComplete="off"
          />
        </div>
      </div>
    )
  }
}

const mapStateToProps = state => ({
  graph: state.graph,
  page: state.page,
  tile: state.tile,
  temporaryTile: state.tile.temporaryTile,
})

const mapDispatchToProps = dispatch => ({
  tileActions: bindActionCreators({ ...tileActions }, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(TileForm)