import React, { Component } from 'react'
import { courtesyS } from 'app/utils'

export const TextInput = props => (
  <label className={(props.error ? 'error' : 'text') + (props.className ? ' ' + props.className : '')}>
    {props.title && <span>{props.title}</span>}
    <input
      type={props.type || "text"}
      required={props.required}
      onChange={props.onChange}
      onBlur={props.onBlur}
      name={props.name}
      value={props.data[props.name] || ""}
      placeholder={props.placeholder}
      autoComplete={props.autoComplete}
    />
  </label>
)

export const LabelDescription = props => (
  <label className={props.className ? 'text description ' + props.className : 'text description'}>
    <span>{props.title}</span>
    <span>{props.children}</span>
  </label>
)

export const NumberInput = props => (
  <label className={props.error ? 'error' : 'text'}>
    <span>{props.title}</span>
    <input
      type="number"
      required={props.required}
      onChange={props.onChange}
      name={props.name}
      value={props.data[props.name]}
      min={props.min}
      max={props.max}
      step={props.step || 1}
    />
  </label>
)

export const ColorInput = props => (
  <label className={props.error ? 'error color' : 'text color'}>
    <span>{props.title}</span>
    <input
      type="color"
      required={props.required}
      onChange={props.onChange}
      name={props.name}
      value={props.data[props.name]}
    />
    <input
      type="text"
      required={props.required}
      onChange={props.onChange}
      name={props.name}
      value={props.data[props.name]}
    />
  </label>
)

export const TextArea = props => (
  <label className={props.error ? 'textarea error' : 'textarea'}>
    {props.title && <span>{props.title}</span>}
    <textarea
      onChange={props.onChange}
      name={props.name}
      placeholder={props.placeholder}
      value={props.data[props.name]}
    />
  </label>
)

export const Checkbox = props => (
  <label className="checkbox">
    <input
      type="checkbox"
      name={props.name}
      value={1}
      checked={!!props.checked}
      onChange={(e) => props.onChange(props.name, e.target.checked)}
    />
    <span>{props.label}</span>
  </label>
)

export const Radio = props => {
  return (
    <label className="radio">
      <input
        type="radio"
        name={props.name}
        value={props.value}
        checked={props.value === props.currentValue}
        onChange={() => props.onChange(props.name, props.value)}
      />
      <span>{props.label}</span>
    </label>
  )
}

export class Select extends Component {
  state = {
    focused: false,
  }

  render() {
    const { name, selected, options, defaultOption, title, loading, onChange, className } = this.props
    if (loading) {
      return <label className='select'><div>Loading...</div></label>
    }
    const { focused } = this.state
    const selectedOption = findOptionInGroups(options, String(selected)) || { label: defaultOption }
    return (
      <label className='selectLabel'>
        {title && <span>{title}</span>}
        <div className={(focused ? 'select focus' : 'select') + " " + (className || "")}>
          <div>{selectedOption.label}</div>
          <select
            onFocus={() => this.setState({ focused: true })}
            onBlur={() => this.setState({ focused: false })}
            onChange={e => {
              onChange(name, e.target.value)
              // this.setState({ focused: false })
            }}
            value={selected || "__default__"}
          >
            {!selected && defaultOption && <option value="__default__">{defaultOption}</option>}
            {options.map((option, i) => (
              option.options
                ? <OptionGroup key={'group_' + option.name} {...option} />
                : <OptionItem key={option.name} {...option} />
            ))}
          </select>
        </div>
      </label>
    )
  }
}
const findOptionInGroups = (options, selected) => {
  if (options.length && options[0].options) {
    options = options.reduce((a,b) => a.concat(b.options), [])
  }
  return options.find(opt => String(opt.name) === String(selected))
}

export const OptionGroup = ({ name, options }) => (
  <optgroup label={name}>
    {options.map(option => (
      <OptionItem key={option.name} {...option} />
    ))}
  </optgroup>
)
export const OptionItem = ({ name, label, disabled }) => (
  <option value={name} disabled={disabled}>
    {label}
  </option>
)

export class FileInputField extends Component {
  state = {
    count: 0,
  }

  handleChange(files) {
    const { multiple, onChange } = this.props
    if (!files) {
      this.setState({ count: 0 })
    } else {
      this.setState({ count: multiple ? files.length : 0 })
    }
    onChange(files)
  }
  
  render() {
    const { error, title, label, required, multiple, mime, name } = this.props
    return (
      <label className={error ? 'error' : 'text fileInput'}>
        <span>{title}</span>
        <div className="row">
          <button>
            {label || (multiple ? "Choose files" : "Choose file")}
            <FileInput
              mime={mime}
              multiple={multiple}
              onChange={this.handleChange.bind(this)}
            />
          </button>
          {!!this.state.count && <span>{courtesyS(this.state.count, "file")}{" selected"}</span>}
        </div>
      </label>
    )
  }
}

export class FileInput extends Component {
  handleChange(e) {
    let { multiple, mime } = this.props
    if (!mime) {
      mime = "image/"
    }
    const files = e.dataTransfer ? e.dataTransfer.files : e.target.files
    let i
    let file, selectedFiles = []
    mime = mime.replace(/\*/g, '.+')
    mime = new RegExp(mime)
    for (i = 0; i < files.length; i++) {
      file = files[i]
      if (file && file.type.match(mime)) {
        if (multiple) {
          selectedFiles.push(file)
        } else {
          break
        }
      }
    }
    if (multiple && selectedFiles.length) {
      this.props.onChange(selectedFiles)
    } else if (!multiple && file) {
      this.props.onChange(file)
    } else {
      this.props.onChange()
    }
  }

  render() {
    return (
      <input type="file" multiple={!!this.props.multiple} onChange={this.handleChange.bind(this)} />
    )
  }
}

export const SubmitButton = (props) => (
  <label>
    <span></span>
    <button
      className={props.className ? "submit " + props.className : "submit"}
      onClick={props.onClick}
    >{props.title}</button>
    {props.after && <span className="after">{props.after}</span>}
  </label>
)