import { type FC, useRef, useState } from 'react'
import Button from '@/components/ui/Button'
import Dialog from '@/components/ui/Dialog'
import { useStore } from '@/store'
import '@/components/wordList/editWordlList.css'
import Input from '../ui/Input'
import Textarea from '../ui/Textarea'

export interface RenameWordListProps {
  currentWordList: string
}

const EditWordList: FC<RenameWordListProps> = ({ currentWordList }) => {
  const [internalStatus, setInternalStatus] = useState<string>('')
  const [newName, setNewName] = useState<string>('')
  const dialogRef = useRef<HTMLDialogElement>(null)

  return (
    <>
      <Button
        type="button"
        icon
        disabled={currentWordList === ''}
        onClick={() => {
          if (dialogRef.current === null || currentWordList === '') {
            return
          }
          const wordList = useStore.getState().wordLists[currentWordList]
          if (wordList === undefined) {
            return
          }
          setNewName(currentWordList)
          setInternalStatus(wordList.join('\n'))
          dialogRef.current.showModal()
        }}
      >
        <i className="fa fa-fw fa-pencil"></i>
      </Button>
      <Dialog id="st-rnd-wordlist-edit-dialog" ref={dialogRef}>
        <div>
          <h2 id="st-rnd-wordlist-edit-dialog-title">
            Edit Word List: <span>{currentWordList}</span>
          </h2>
          <label htmlFor="st-rnd-wordlist-name">Name</label>
          <p className="st-rnd-small-text">
            Name of the word list, used in placeholder and macros.
          </p>
          <Input
            id="st-rnd-wordlist-name"
            type="text"
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
          />
          <label htmlFor="st-rnd-wordlist-words">Words</label>
          <p className="st-rnd-small-text">
            Words separated by newlines, words can be more than one word!
          </p>
          <Textarea
            id="st-rnd-wordlist-words"
            value={internalStatus}
            onChange={(e) => setInternalStatus(e.target.value)}
            rows={10}
          />
          <div id="st-rnd-wordlist-actions">
            <Button
              type="button"
              neutral
              onClick={() => {
                if (dialogRef.current === null) {
                  return
                }
                dialogRef.current.close()
                setInternalStatus('')
                setNewName('')
              }}
            >
              Close
            </Button>
            <Button
              type="button"
              onClick={() => {
                if (
                  currentWordList === '' ||
                  newName === undefined ||
                  internalStatus === undefined ||
                  dialogRef.current === null
                ) {
                  return
                }
                if (newName === '') {
                  alert('Name cannot be empty')
                  return
                }
                const addWordList = useStore.getState().addWordList
                if (currentWordList !== newName) {
                  const removeWordList = useStore.getState().removeWordList
                  removeWordList(currentWordList)
                }
                addWordList(newName, internalStatus.split('\n'))
                dialogRef.current.close()
                setInternalStatus('')
                setNewName('')
              }}
            >
              Save
            </Button>
          </div>
        </div>
      </Dialog>
    </>
  )
}

export default EditWordList