import React from 'react'

import {
  NumberInput, ColorInput, 
  Select, TextArea, Checkbox
} from 'app/common'

import { TEXT_FONT_FAMILIES, TEXT_FONT_STYLES, MARQUEE_DIRECTIONS } from './tile.constants'

export default function TileTextForm({ tile, errorFields, parent }) {
  return (
    <div>
      <TextArea
        title=""
        name="content"
        required
        data={tile.settings}
        error={errorFields.has('content')}
        onChange={parent.handleSettingsChange}
        autoComplete="off"
      />
      <div className='row font'>
        <Select
          title="Font"
          name='font_family'
          selected={tile.settings.font_family || 'sans-serif'}
          options={TEXT_FONT_FAMILIES}
          onChange={parent.handleSettingsSelect}
        />
        <NumberInput
          title=''
          name='font_size'
          data={tile.settings}
          min={1}
          max={1200}
          error={errorFields.has('font_size')}
          onChange={parent.handleSettingsChange}
          autoComplete="off"
        />
        <Select
          name='font_style'
          selected={tile.settings.font_style || 'normal'}
          options={TEXT_FONT_STYLES}
          title=''
          onChange={parent.handleSettingsSelect}
        />
      </div>
      <ColorInput
        title='Text'
        name='font_color'
        data={tile.settings}
        error={errorFields.has('font_color')}
        onChange={parent.handleSettingsChange}
        autoComplete="off"
      />
      <ColorInput
        title='BG'
        name='background_color'
        data={tile.settings}
        error={errorFields.has('background_color')}
        onChange={parent.handleSettingsChange}
        autoComplete="off"
      />
      <div className='row pair'>
        <NumberInput
          title="Width"
          name="width"
          data={tile.settings}
          min={0}
          max={1200}
          error={errorFields.has('width')}
          onChange={parent.handleSettingsChange}
          autoComplete="off"
        />
        <NumberInput
          title="Height"
          name="height"
          data={tile.settings}
          min={0}
          max={1200}
          error={errorFields.has('height')}
          onChange={parent.handleSettingsChange}
          autoComplete="off"
        />
      </div>

      <Checkbox
        label="Marquee"
        name="is_marquee"
        className='short'
        checked={tile.settings.is_marquee}
        onChange={parent.handleSettingsSelect}
        autoComplete="off"
      />
      {tile.settings.is_marquee && (
        <div>
          <div className='row single'>
            <Select
              title="Direction"
              name='marquee_direction'
              selected={tile.settings.marquee_direction || 'left'}
              options={MARQUEE_DIRECTIONS}
              onChange={parent.handleSettingsSelect}
            />
          </div>
          <div className="row single_text">
            <NumberInput
              title="Speed"
              name="marquee_speed"
              data={tile.settings}
              step={1}
              min={0}
              max={1000}
              defaultValue={20}
              onChange={parent.handleSettingsChange}
              autoComplete="off"
            />
          </div>
          <div className="row single_text">
            <NumberInput
              title="Content width"
              name="marquee_content_width"
              data={tile.settings}
              step={1}
              min={0}
              max={5000}
              defaultValue={200}
              onChange={parent.handleSettingsChange}
              autoComplete="off"
            />
          </div>
          <div className="row single_text">
            <NumberInput
              title="Content height"
              name="marquee_content_height"
              data={tile.settings}
              step={1}
              min={0}
              max={2000}
              defaultValue={parseInt(tile.settings.font_size) + 10}
              onChange={parent.handleSettingsChange}
              autoComplete="off"
            />
          </div>
          <Checkbox
            label="Marquee gradient"
            name="marquee_gradient"
            className='short'
            checked={tile.settings.marquee_gradient}
            onChange={parent.handleSettingsSelect}
            autoComplete="off"
          />
          {tile.settings.marquee_gradient && (
            <ColorInput
              title='Color'
              name='marquee_gradient_color'
              data={tile.settings}
              onChange={parent.handleSettingsChange}
              autoComplete="off"
            />
          )}
        </div>
      )}
    </div>
  )
}