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

import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable'
import { State } from 'country-state-city'

import { updateComponentProperties, updateComponentProperty } from '@epicformbuilder/admin/data'

const SortableElement =
  ({ id, value, handleOptionChange, handleOptionRemove, handleOptionRadio, checked }) => {

    const onChange = event => handleOptionChange(event)

    const onRemove = event => handleOptionRemove(event)

    return (
      <li className="component-settings-options-item">
          <div className="component-settings__row component-settings__row_option">
              <div className="component-settings__move-row"/>
              <input
                  type="text"
                  className="input-default input-default_dark component-settings__input"
                  value={value}
                  onChange={onChange}
              />
              <div className="constructor__radio-container component-settings__radio-container">
                  <input
                      className="custom-radio"
                      type="radio"
                      name="radio"
                      checked={checked}
                      onChange={e => handleOptionRadio(value)}
                  />
                  <label/>
              </div>
              <div
                  className="component-settings__del-input"
                  onClick={onRemove}
              />
          </div>
      </li>
    )
  }

export default function StateOptions ({ id, country, options, defaults }) {

  const dispatch = useDispatch()

  const [option, setOption] = useState('')
  const sensors = useSensors(
    useSensor(PointerSensor)
  )

  function handleSortEnd({ oldIndex, newIndex }) {
    dispatch( updateComponentProperty( id, 'options', Object.assign({}, options, { [country]: arrayMove(getOptions(), oldIndex, newIndex) })))
  }

  function handleOptionChange( optionIndex ) {
    return ( event ) => {
      const oldValue = options[ optionIndex ]
      const newValue = event.target.value
      dispatch( updateComponentProperties(
        id,
        {
          options: Object.assign({}, options, { [country]: getOptions().map((item, index) => { if (index === optionIndex) return newValue; return item }) }),
          defaults: Object.assign({}, defaults, { [country]: defaults[country] ? defaults[country].map(item => { if (item === oldValue) return newValue; return item }): [] }),
        }
      ))
    }
  }

  function handleOptionRemove( optionIndex ) {
    return event => {
      event.preventDefault()
      const value = getOptions()[ optionIndex ]
      dispatch( updateComponentProperties(
        id,
        {
          options: Object.assign({}, options, { [country]: getOptions().filter((item, index) => index !== optionIndex) }),
          defaults: Object.assign({}, defaults, { [country]: defaults[country] ? defaults[country].filter(state => state !== value): [] })
        }
      ))
    }
  }

  function handleOptionRadio(value) {
    dispatch(updateComponentProperty(id, 'defaults', Object.assign({}, defaults, { [country]: [value] })))
  }

  function getOptions() {
    return country
      ? (options.hasOwnProperty( country )
        ? options[country]
        : State.getStatesOfCountry( country ).map( state => state.name )
      )
      : []
  }

  function addOption(event) {
    event.preventDefault()
    if ('' !== option && Boolean(country)) {
      dispatch( updateComponentProperty( id,'options', Object.assign( {}, options, { [country]: getOptions().concat( [option] ) } ) ) )
      setOption('')
    }
  }

  function addOptionChange(event) {
    setOption(event.target.value)
  }

  const opts = getOptions().map((value, index) =>
    <SortableElement
      key={ index }
      id={ index }
      index={ index }
      value={ value }
      handleOptionChange={ handleOptionChange(index) }
      handleOptionRemove={ handleOptionRemove(index) }
      handleOptionRadio={ handleOptionRadio }
      checked={ defaults[country] && (-1 < defaults[country].indexOf(value)) }
    />
  )

  return (
    0 < opts.length ? (
      <>
        <DndContext
          sensors={ sensors }
          collisionDetection={ closestCenter }
          onDragEnd={ handleSortEnd }
        >
          <SortableContext
            items={ options.map( ( option, index ) => index ) }
            strategy={ verticalListSortingStrategy }
          >
              <div className="component-settings-options__country-scroll">
                <ul className="component-settings-options">
                  { opts }
                </ul>
              </div>
          </SortableContext>
        </DndContext>
        <div className="component-settings__row component-settings__row_option">
          <input
            type="text"
            className="input-default input-default_dark component-settings__input component-settings__input_add"
            value={ option }
            onChange={ addOptionChange }
            disabled={ !Boolean(country) }
          />
          <div
            className="component-settings__add-input"
            onClick={ addOption }
          />
        </div>
      </>
    ) : (
      <div className="component-settings-options__country-scroll">
        No Options. Please, choose a Country.
      </div>
    )
  )
}