import React, { useRef } from 'react'
import { useDispatch, useSelector } 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,
  getTypeTagsSelector,
  validateEmail
} from '@epicformbuilder/admin/data'
import {
  SettingsTab,
  HelpCenter,
  Label,
} from '@epicformbuilder/admin/editor/components';
import QuillEditor from '../QuillEditor'

export default function Notification ({
  id,
  label,
  to,
  subject,
  body,
}) {
  const tabs = {
    general: true,
    help: false
  }

  const dispatch = useDispatch()
  const quillRef = useRef()
  const tags = [ ...useSelector( getTypeTagsSelector ), 'submission' ]

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

  return (
      <div className="tabs">

        <SettingsTab
            id="notification-settings-general"
            label="general"
            checked={ tabs.general }
        >
          <Label htmlId="text" id={ id } label={ label } onChange={ onChange } />
          {/* To EMAIL SETTINGS */}
          <div className="component-settings__section">
            <div className="component-settings__row-flex">
              <div className="component-settings__title">
                <PlaceholderSVG/>
                To Email
              </div>
            </div>
            <div className="component-settings__row">
              {
                  ! validateEmail( to ) &&
                  <span className="input-error">
                    Please, make sure to provide a correct email
                  </span>
              }
              <input
                  type="text"
                  className="input-default input-default_dark"
                  value={ to }
                  onChange={ onChange( 'to' ) }
              />
              <div className="component-settings__description">
                Put email address for a send submission notifications to go to
              </div>
            </div>
          </div>
          {/* SUBJECT SETTINGS */}
          <div className="component-settings__section">
            <div className="component-settings__row-flex">
              <div className="component-settings__title">
                <LabelSVG/>
                Subject
              </div>
            </div>
            <div className="component-settings__row">
              <input
                  type="text"
                  className="input-default input-default_dark"
                  value={ subject }
                  onChange={ onChange( 'subject' ) }
              />
              <div className="component-settings__description">
                This field sets the subject line for the email that will be sent to the recipient.
              </div>
            </div>
          </div>
          {/* BODY SETTINGS */}
          <div className="component-settings__section">
            <div className="component-settings__row-flex">
              <div className="component-settings__title">
                <PlaceholderSVG/>
                Body
              </div>
            </div>
            <div className="component-settings__row">
              <QuillEditor
                  ref={ quillRef }
                  className="custom-quill-dark"
                  readOnly={ false }
                  defaultValue={ body || '' }
                  onChange={ onChange( 'body' ) }
                  tags={ tags }
              />
              <div className="component-settings__description">
                This field sets the content of the email message that will be sent to the recipient.
              </div>
              <div className="component-settings__tags">
                <span className="component-settings__tag">#submission</span>
                <span className="component-settings__description"> - use this special tag to add full submission data inside email</span>
              </div>
              {
                  0 < tags.length &&
                  <div className="component-settings__tags">
                    { tags.map( t => <span
                        className="component-settings__tag">#{ t }</span>)}
                    <span className="component-settings__description"> - all the tags your form has</span>
                  </div>
              }
            </div>
          </div>
        </SettingsTab>

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

      </div>
  )
}