import React, { useState } from 'react'
import { useSelector } from 'react-redux'

import TagSVG from './images/tag.svg?react'
import { getFormTagsExceptForIdSelector } from '@epicformbuilder/admin/data'

export default function DataTag({ id, tag, onChange }) {

  const tags = useSelector( store => getFormTagsExceptForIdSelector( store, id ) )

  const [ wrongCharacterError, setWrongCharacterError ] = useState( false )

  const testValue = value => /^[\d\w-_]*$/.test(value)

  return (
    <div className="component-settings__section">
      <div className="component-settings__row-flex">
        <div className="component-settings__title">
          <TagSVG/>
          Data tag
        </div>
      </div>
      <div className="component-settings__row">
        {
          tags.includes( tag ) &&
          <span className="input-error">
            Data tag must be unique to the Form
          </span>
        }
        {
          wrongCharacterError &&
          <span className="input-error">
            Only latin letters, 0 to 9 digits and -, _ symbols are allowed
          </span>
        }
        <input
          type="text"
          className="input-default input-default_dark"
          value={ tag }
          onChange={ e => {
            if (testValue(e.target.value)) {
              setWrongCharacterError(false)
              onChange(e)
            } else {
              setWrongCharacterError(true)
            }
          }}
        />
        <div className="component-settings__description">
          Tag must have a unique name through the whole form and be of latin letters, 0-9 digits and -, _ characters only
        </div>
      </div>
    </div>
  )
}