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

import OptionsSVG from '@epicformbuilder/admin/images/options.svg?react'
import { updateComponentProperty } from '@epicformbuilder/admin/data'
import { SettingsTab, DataTag, HelpCenter, Hint, Label, Required } from '@epicformbuilder/admin/editor/components'

import Options from '../Options'

export default function Checkbox ({
  id, label, showLabel, showOther,
  inline, options, defaults, hint,
  showHint, tag, required, errorEmptyData
}) {

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

  const dispatch = useDispatch()

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

  const handleResetDefaults = e => {
    e.preventDefault()
    dispatch(updateComponentProperty(id, 'defaults', []))
  }

  return (
    <div className="tabs">

      <SettingsTab
        id="checkbox-settings-general"
        label="general"
        checked={ tabs.general }
      >
        <Label htmlId="checkbox" id={ id } showLabel={ showLabel } label={ label } onChange={ onChange } />
        {/* OPTIONS SETTINGS */}
        <div className="component-settings__section">
          <div className="component-settings__row-flex component-settings__row-flex_option">
            <div className="component-settings__title">
              <OptionsSVG/>
              Options
            </div>
            <div className="switch__container">
              <a href="#" className="components-panel__link btn__templates-builder" onClick={ handleResetDefaults }>Reset selection</a>
            </div>
          </div>
          <Options id={ id } options={ options } defaults={ defaults } type="checkbox" />
          <div className="component-settings__row-flex component-settings__row-flex_option-last">
            <div className="component-settings__description component-settings__description_option">
              Add user option
            </div>
            <div className="switch__container">
              <label className="switch" htmlFor="checkbox-settings-show-other">
                <input
                  id="checkbox-settings-show-other"
                  type="checkbox"
                  checked={ showOther }
                  onChange={ onChange(id, 'showOther') }
                />
                <div className="slider round"/>
              </label>
            </div>
          </div>
          <div className="component-settings__row-flex component-settings__row-flex_option-last">
            <div className="component-settings__description component-settings__description_option">
              Display list items inline
            </div>
            <div className="switch__container">
              <label className="switch" htmlFor="checkbox-settings-display-inline">
                <input
                  id="checkbox-settings-display-inline"
                  type="checkbox"
                  checked={ inline }
                  onChange={ onChange(id, 'inline') }
                />
                <div className="slider round"/>
              </label>
            </div>
          </div>
        </div>
        <Hint htmlId="checkbox" id={ id } showHint={ showHint } hint={ hint } onChange={ onChange } />
      </SettingsTab>

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

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

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

    </div>
  )
}