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

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

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

export default function ProcessingMessage ({ 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="processingmessage-settings-general"
        label="general"
        checked={ tabs.general }
      >
        <Label htmlId="text" id={ id } label={ label } onChange={ onChange } />
        {/* 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="processingmessage-settings-help"*/}
      {/*  label="help center"*/}
      {/*  checked={ tabs.help }*/}
      {/*>*/}
      {/*  <HelpCenter component="processingMessage" />*/}
      {/*</SettingsTab>*/}

    </div>
  )
}