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

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

import { updateActionProperty } from '@epicformbuilder/admin/data'
import { SettingsTab, HelpCenter } from '@epicformbuilder/admin/editor/components'

export default function FailureMessage ({ id, label, message }) {

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

  const dispatch = useDispatch()

  const onChange = (id, property) => event => {
    dispatch(updateActionProperty(id, property, event.target.value))
  }

  return (
    <div className="tabs">

      <SettingsTab
        id="failuremessage-settings-general"
        label="general"
        checked={ tabs.general }
      >
        {/* LABEL SETTINGS */}
        <div className="component-settings__section">
          <div className="component-settings__row-flex">
            <div className="component-settings__title">
              <LabelSVG/>
              Label
            </div>
          </div>
          <div className="component-settings__row">
            <input
              type="text"
              className="input-default input-default_dark"
              value={ label }
              onChange={ onChange(id, 'label') }
            />
            <div className="component-settings__description">
              Field label is a explanatory title for the content you expect your users to enter.
            </div>
          </div>
        </div>
        {/* MESSAGE SETTINGS */}
        <div className="component-settings__section">
          <div className="component-settings__row-flex">
            <div className="component-settings__title">
              <PlaceholderSVG/>
              Message
            </div>
          </div>
          <div className="component-settings__row">
            <input
              type="text"
              className="input-default input-default_dark"
              value={ message }
              onChange={ onChange(id, 'message') }
            />
            <div className="component-settings__description">
              Usually, a placeholder is a sample of what kind of input you expect.
            </div>
          </div>
        </div>
      </SettingsTab>

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

    </div>
  )
}