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

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

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

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

  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))
  }

  return (
    <div className="tabs">

      <SettingsTab
        id="postcode-settings-general"
        label="general"
        checked={ tabs.general }
      >
        <Label htmlId="postcode" id={ id } showLabel={ showLabel } label={ label } onChange={ onChange } />
        <Placeholder id={ id } placeholder={ placeholder } onChange={ onChange } />
        <Hint htmlId="postcode" id={ id } showHint={ showHint } hint={ hint } onChange={ onChange } />
      </SettingsTab>

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

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

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

    </div>
  )
}