import { memo, useEffect, useRef, useState } from "react"
import { Dialog } from "@headlessui/react"
import { css } from "@emotion/css"
import Icon from "@aet/icons/macro"
import { useTranslation } from "react-i18next"
import { useEvent } from "@aet/hooks"
import { DARK_MODE, token } from "~/options/theme"
import { IconButton, Input, Pill, PrimaryPill } from "~/shared/styled"

export const SubLabelEditor = memo<{
  open: boolean
  value: string
  onChange: (value: string) => void
  onClose: () => void
}>(({ open, onClose, value, onChange }) => {
  const { t } = useTranslation()
  const inputRef = useRef<HTMLInputElement>(null)
  const [inputValue, setInputValue] = useState(value)

  useEffect(() => {
    setInputValue(value)
  }, [value])

  useEffect(() => {
    if (open) {
      inputRef.current?.focus()
    }
  }, [open])

  const onConfirm = useEvent(() => {
    onChange(inputValue)
    onClose()
  })

  return (
    <Dialog
      className={css`
        color: ${token.fg.default};
        position: relative;
        z-index: 10;
      `}
      open={open}
      onClose={onClose}
    >
      <div
        className={css`
          position: fixed;
          inset: 0;
          background-color: rgba(0, 0, 0, 0.7);
        `}
        aria-hidden="true"
      />
      <div
        className={css`
          position: fixed;
          inset: 0;
          overflow-y: auto;
        `}
      >
        <div
          className={css`
            display: flex;
            min-height: 100%;
            align-items: center;
            justify-content: center;
          `}
        >
          <Dialog.Panel
            className={css`
              width: 100%;
              max-width: 28rem;
              border-radius: 0.5rem;
              background-color: ${token.canvas.default};
              box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
              transition: all 0.2s ease-in-out;
              ${DARK_MODE} {
                border: 1px solid ${token.border.default};
              }
            `}
          >
            <Dialog.Title
              className={css`
                background: ${token.canvas.overlay};
                display: flex;
                align-items: center;
                font-size: 1em;
                line-height: 1.5rem;
                font-weight: 500;
                margin: 0;
                padding: 0.4rem 1rem;
                border-top-left-radius: 0.5rem;
                border-top-right-radius: 0.5rem;
              `}
            >
              <span
                className={css`
                  flex: 1;
                `}
              >
                {t("editor.verbModifyLabel")}
              </span>
              <IconButton
                className={css`
                  height: 1.75em;
                  display: flex;
                  align-items: center;
                `}
                onClick={onClose}
              >
                <Icon icon="VscClose" />
              </IconButton>
            </Dialog.Title>

            <Dialog.Description
              className={css`
                padding: 0.3rem 1rem;
              `}
            >
              <Input
                ref={inputRef}
                value={inputValue}
                onChange={e => setInputValue(e.target.value)}
                onKeyDown={e => {
                  if (e.key === "Enter" && inputValue !== value) {
                    onConfirm()
                  }
                }}
              />
            </Dialog.Description>

            <div
              className={css`
                display: flex;
                text-align: right;
                justify-content: flex-end;
                background: ${token.canvas.overlay};
                border-bottom-left-radius: 0.5rem;
                border-bottom-right-radius: 0.5rem;
                padding: 0.5rem 1rem;
              `}
            >
              <Pill onClick={onClose}>Cancel</Pill>
              <PrimaryPill
                onClick={onConfirm}
                disabled={inputValue === value}
                className={css`
                  width: auto !important;
                  margin-left: 7px;
                `}
              >
                Confirmer
              </PrimaryPill>
            </div>
          </Dialog.Panel>
        </div>
      </div>
    </Dialog>
  )
})
