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

import actions from 'app/actions'
import { session } from 'app/session'

import {
  TextInput, NumberInput, ColorInput, Slider,
  Select, LabelDescription, TextArea, Checkbox,
  SubmitButton, Loader } from 'app/common'
import AudioSelect from 'app/views/audio/components/audio.select'
import { preloadImage, preloadVideo } from 'app/utils'

import * as pageActions from 'app/views/page/page.actions'
import * as tileActions from 'app/views/tile/tile.actions'

import {
  SELECT_TYPES, ALIGNMENTS,
  REQUIRED_KEYS,
  IMAGE_TILE_STYLES, VIDEO_STYLES,
  TEXT_FONT_FAMILIES, TEXT_FONT_STYLES,
  CURSORS, UNITS,
  NO_LINK, EXTERNAL_LINK,
  OPEN_POPUP_LINK, CLOSE_POPUP_LINK, TOGGLE_POPUP_LINK,
  PAGE_LIST_TOP_OPTIONS,
  NO_POPUP, POPUP_LIST_TOP_OPTIONS,
} from 'app/views/tile/forms/tile.constants'

import {
  TILE_CONSTRUCTORS,

  TileImageForm,
  TileLinkForm,
  TileTextForm,
  TileGradientForm,
  TileScriptForm,
  TileVideoForm,

  TileHyperlinkForm,
  TileMiscForm,
  TileSoundForm,
  TileTypeForm,
} from 'app/views/tile/forms'

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

class TileForm extends Component {
  state = {
    title: "",
    submitTitle: "",
    errorFields: new Set([]),
    modified: false,
    pageList: [],
    popupList: [],
    cursors: {},
    fontFamilies: [],
  }

  constructor(props){
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleSelect = this.handleSelect.bind(this)
    this.handleSettingsChange = this.handleSettingsChange.bind(this)
    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
    this.handleAlignment = this.handleAlignment.bind(this)
    this.handleImageChange = this.handleImageChange.bind(this)
    this.handleVideoChange = this.handleVideoChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleDelete = this.handleDelete.bind(this)
  }

  componentDidMount() {
    const { graph, page, isNew, initialData, sortOrder } = this.props
    const title = isNew ? 'new tile' : 'editing tile'
    const submitTitle = isNew ? "Create Tile" : "Save Changes"
    this.setState({
      title,
      submitTitle,
      errorFields: new Set([]),
    })
    const { pages } = graph.show.res
    const linkPages = initialData ? pages.filter(page => page.id !== initialData.id) : pages
    let pageList = [
      ...PAGE_LIST_TOP_OPTIONS,
      ...linkPages.map(page => ({ name: page.id, label: page.path }))
    ]
    let popupList = [
      ...POPUP_LIST_TOP_OPTIONS,
      ...Object.keys(page.editor.popups).map(popup_group => ({ name: popup_group, label: popup_group }))
    ]
    let cursors = this.props.graph.show.res.uploads
      .filter(upload => upload.tag === 'cursor')
      .reduce((a,b) => {
        a[b.id] = b
        return a
      }, {})
    let customFonts = (this.props.graph.show.res.settings.custom_fonts || "").split("\n").map(name => ({
      name,
      label: name.split(",")[0].replace(/\"/g, "")
    }))
    let fontFamilies = TEXT_FONT_FAMILIES.concat(customFonts)
    this.setState({ pageList, popupList, cursors, fontFamilies })
    if (isNew) {
      const newTile = TILE_CONSTRUCTORS.image({
        id: "new",
        graph_id: graph.show.res.id,
        page_id: page.show.res.id,
        sort_order: sortOrder,
      })
      this.props.tileActions.updateTemporaryTile(newTile)
    } else {
      this.props.tileActions.updateTemporaryTile({ ...initialData })
    }
  }

  componentDidUpdate(prevProps) {
    if (!this.props.isNew && this.props.initialData !== prevProps.initialData) {
      this.handleSubmit()
      this.props.tileActions.updateTemporaryTile({ ...this.props.initialData })
      this.setState({
        errorFields: new Set([]),
      })
    }
    if (this.props.page.editor.pickedCursor !== prevProps.page.editor.pickedCursor && this.props.page.editor.pickedCursor) {
      this.handleSettingsSelect('custom_cursor_id', this.props.page.editor.pickedCursor.id)
      this.props.pageActions.pickCursor(null)
    }
  }

  componentWillUnmount() {
    // if the item has changed, save before we close the form!
    if (!this.props.isNew && this.state.modified) {
      this.handleSubmit()
    }
  }

  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 = TILE_CONSTRUCTORS[type]({
      id: temporaryTile.id,
      graph_id: temporaryTile.graph_id,
      page_id: temporaryTile.page_id,
    })
    newTile.settings.align = temporaryTile.settings.align
    this.clearErrorField('type')
    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)
    }
    if (name === 'target_page_id') {
      value = parseInt(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,
      }
    })
    if (name === 'cursor' && value === 'custom') {
      this.props.pageActions.toggleCursorList(true)
    }
  }

  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,
        }
      })
    })
  }

  handleVideoChange(e) {
    const { name, value } = e.target
    this.handleSettingsSelect(name, value)
    preloadVideo(value).then(video => {
      // console.log(img)
      this.props.tileActions.updateTemporaryTile({
        ...this.props.temporaryTile,
        settings: {
          ...this.props.temporaryTile.settings,
          [name]: value,
          width: video.videoWidth,
          height: video.videoHeight,
          x: 0, y: 0,
        }
      })
    })
  }

  clearErrorField(name) {
    const { errorFields } = this.state
    if (errorFields.has(name)) {
      errorFields.delete(name)
      this.setState({
        errorFields,
        modified: true,
      })
    } else if (!this.state.modified) {
      this.setState({
        errorFields,
        modified: true,
      })
    }
  }

  handleSubmit(e) {
    if (e) e.preventDefault()
    const { isNew, temporaryTile, onSubmit, onClose } = 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)
      if (e) {
        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
      }
      validData.target_page_id = validData.target_page_id || 0
      this.setState({ modified: false })
      console.log('submit', validData)
      onSubmit(validData)
      // if submitting after switching elements, don't close the form
      if (e && onClose) {
        onClose()
      }
    }
  }

  handleDelete() {
    const { temporaryTile, isNew, onClose } = this.props
    if (confirm('Really delete this tile?')) {
      actions.tile.destroy(temporaryTile)
      .then(() => {
        onClose()
      })
    }
  }

  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>
        <button className='box_corner' onClick={this.props.pageActions.toggleSidebarSide}>
          {'◁'}
        </button>
        <form onSubmit={this.handleSubmit}>

          <TileTypeForm tile={temporaryTile} errorFields={errorFields} parent={this} />

          {this.renderPositionInfo()}

          {temporaryTile.type === 'image'
            ? <TileImageForm tile={temporaryTile} errorFields={errorFields} parent={this} />
          : temporaryTile.type === 'video'
            ? <TileVideoForm tile={temporaryTile} errorFields={errorFields} parent={this} />
          : temporaryTile.type === 'text'
            ? <TileTextForm tile={temporaryTile} errorFields={errorFields} parent={this} fontFamilies={this.state.fontFamilies} />
          : temporaryTile.type === 'link'
            ? <TileLinkForm tile={temporaryTile} errorFields={errorFields} parent={this} />
          : temporaryTile.type === 'gradient'
            ? <TileGradientForm tile={temporaryTile} errorFields={errorFields} parent={this} />
          : temporaryTile.type === 'script'
            ? <TileScriptForm tile={temporaryTile} errorFields={errorFields} parent={this} />
          : ""}

          <TileHyperlinkForm
            tile={temporaryTile} errorFields={errorFields} parent={this}
            pageList={this.state.pageList} popupList={this.state.popupList}
            cursors={this.state.cursors}
          />
          <TileMiscForm tile={temporaryTile} errorFields={errorFields} parent={this} />
          <TileSoundForm tile={temporaryTile} errorFields={errorFields} parent={this} />

          <div className='row buttons'>
            <SubmitButton
              title={submitTitle}
              onClick={this.handleSubmit}
            />
            {!isNew && 
              <SubmitButton
                title={'Delete'}
                className='destroy'
                onClick={this.handleDelete}
              />
            }
          </div>
          {!!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)}{'\u00B0 '}</span>}
        {scale === 1 || <span>{'x'}{scale.toFixed(2)}</span>}
      </div>
    )
  }
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(TileForm)