import React from 'react'
import { useDispatch } from 'react-redux'
import ReactSelect from 'react-select'

import PlaceholderSVG from '@epicformbuilder/admin/images/settings/placeholder.svg?react'

import { updateComponentProperty } from '@epicformbuilder/admin/data'
import { SettingsTab, DataTag, Label, Placeholder, Hint, Required, HelpCenter } from '@epicformbuilder/admin/editor/components'
import { userTime } from '../../../../services/time'

function time (format) {
  return userTime({
    timestamp: undefined,
    timezone: window.__EPICFORMBUILDER__.__USER__.settings.timezone,
    format: format
  })
}

export default function Time ({
  id, label, showLabel, placeholder, format, hint,
  showHint, tag, required, errorEmptyData
}) {

  const tabs = {
    general: true,
    validation: true,
    advanced: true,
    help: true
  }

  const formats = {
    'h:mm aa': time('h:mm aa') + ' (12h format)',
    'h:mm aaaa': time('h:mm aaaa') + ' (12h format)',

    'HH:mm': time('HH:mm') + ' (24h format)',
  }

  const dispatch = useDispatch()

  const onChange = (id, property) => event => {
    const booleanProperties = ['showLabel', 'showHint', 'required'];
    const value = 0 <= booleanProperties.indexOf(property)
      ?event.target.checked
      :event.target.value
    dispatch(updateComponentProperty(id, property, value))
  }

  function handleFormatChange(option) {
    onChange(id, 'format')({ target: { value: option.value }})
  }

  return (
    <div className="tabs">

      <SettingsTab
        id="time-settings-general"
        label="general"
        checked={ tabs.general }
      >
        <Label htmlId="time" id={ id } showLabel={ showLabel } label={ label } onChange={ onChange } />
        <Placeholder id={ id } placeholder={ placeholder } onChange={ onChange } />
        {/* FORMAT SETTINGS */}
        <div className="component-settings__section">
          <div className="component-settings__row-flex">
            <div className="component-settings__title">
              <PlaceholderSVG/>
              Format
            </div>
          </div>
          <div className="component-settings__row">
            <div className="component-settings__custom_select">
              <ReactSelect
                className="react-select"
                classNamePrefix="select"
                placeholder={ 'Select Time format which suits you' }
                options={ Object.keys(formats).map(f => ({ value: f, label: formats[f] })) }
                value={{ value: format, label: time(format) }}
                onChange={ handleFormatChange }
              />
            </div>
            <div className="component-settings__description">
              Date format
            </div>
          </div>
        </div>
        <Hint htmlId="time" id={ id } showHint={ showHint } hint={ hint } onChange={ onChange } />
      </SettingsTab>

      <SettingsTab
        id="time-settings-validation"
        label="validation and error messages"
        checked={ tabs.validation }
      >
        <Required htmlId="time" id={ id } required={ required } errorEmptyData={ errorEmptyData } onChange={ onChange } />
      </SettingsTab>

      <SettingsTab
        id="time-settings-advanced"
        label="advanced"
        checked={ tabs.advanced }
      >
        <DataTag id={ id } tag={ tag } onChange={ onChange(id, 'tag') } />
      </SettingsTab>

      {/*<SettingsTab*/}
      {/*  id="time-settings-help"*/}
      {/*  label="help center"*/}
      {/*  checked={ tabs.help }*/}
      {/*>*/}
      {/*  <HelpCenter component="time" />*/}
      {/*</SettingsTab>*/}
    </div>
  )
}