path: root/frontend/views/page/components/tile.form.js

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

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

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

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', 'width', 'height'],
}

// target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)

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

const newText = (data) => ({
  settings: {
    ...newPosition(),
    tile: false,
    url: "",
    width: 200,
    height: 200,
  },
  type: 'text',
  ...data,
})

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

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

  componentDidMount() {
    const { graph, page, isNew } = this.props
    const title = isNew ? 'new tile' : 'editing tile'
    const submitTitle = isNew ? "Create Tile" : "Save Changes"
    this.setState({
      title,
      submitTitle,
      errorFields: new Set([]),
      data: { 
        ...(this.props.data || this.state.data),
        graph_id: graph.id,
        page_id: page.id,
      },
    })
  }

  handleChange(e) {
    const { errorFields } = this.state
    const { name, value } = e.target
    if (errorFields.has(name)) {
      errorFields.delete(name)
    }
    if (name === 'type') {
      const { graph, page } = this.props
      let newData;
      switch(type) {
        case 'image':
          newData = newImage({ graph_id: graph.id, page_id: page.id })
          break
        case 'text':
          newData = newText({ graph_id: graph.id, page_id: page.id })
          break
      }
      this.setState({
        errorFields,
        data: newData,
      })
    }
    this.setState({
      errorFields,
      data: {
        ...this.state.data,
        [name]: value,
      }
    })
  }

  handleSettingsChange(e) {
    const { errorFields } = this.state
    const { name, value } = e.target
    if (errorFields.has(name)) {
      errorFields.delete(name)
    }
    this.setState({
      errorFields,
      data: {
        ...this.state.data,
        settings: {
          ...this.state.settings,
          [name]: value,
        }
      }
    })
  }

  handleSelect(name, value) {
    const { errorFields } = this.state
    if (errorFields.has(name)) {
      errorFields.delete(name)
    }
    this.setState({
      errorFields,
      data: {
        ...this.state.data,
        [name]: value,
      }
    })
  }

  handleSettingsSelect(name, value) {
    const { errorFields } = this.state
    if (errorFields.has(name)) {
      errorFields.delete(name)
    }
    this.setState({
      errorFields,
      data: {
        ...this.state.data,
        settings: {
          ...this.state.data.settings,
          [name]: value,
        }
      }
    })
  }

  handleSubmit(e) {
    e.preventDefault()
    const { isNew, onSubmit } = this.props
    const { data } = this.state
    const requiredKeys = REQUIRED_KEYS[data.type]
    const validKeys = "graph_id username settings".split(" ")
    const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
    const errorFields = requiredKeys.filter(key => !validData[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)
      } else {
        validData.id = data.id
      }
      console.log('submit', validData)
      onSubmit(validData)
    }
  }

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

          {this.renderPositionInfo()}

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

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

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

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

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