import { useState } from 'react'
import { isEqual } from 'lodash'
import clsx from 'clsx'
import { PencilIcon } from '@heroicons/react/outline'

import { Fold } from 'common/fold'
import { parseWordsAsTags } from 'common/util/parse'
import { deleteFold, updateFold } from 'web/lib/firebase/folds'
import { toCamelCase } from 'common/util/format'
import { Spacer } from '../layout/spacer'
import { TagsList } from '../tags-list'
import { useRouter } from 'next/router'

export function EditFoldButton(props: { fold: Fold; className?: string }) {
  const { fold, className } = props
  const router = useRouter()

  const [name, setName] = useState(fold.name)
  const [about, setAbout] = useState(fold.about ?? '')

  const initialOtherTags =
    fold?.tags.filter((tag) => tag !== toCamelCase(name)).join(', ') ?? ''

  const [otherTags, setOtherTags] = useState(initialOtherTags)
  const [isSubmitting, setIsSubmitting] = useState(false)

  const tags = parseWordsAsTags(toCamelCase(name) + ' ' + otherTags)
  const lowercaseTags = tags.map((tag) => tag.toLowerCase())

  const saveDisabled =
    name === fold.name &&
    isEqual(tags, fold.tags) &&
    about === (fold.about ?? '')

  const onSubmit = async () => {
    setIsSubmitting(true)

    await updateFold(fold, {
      name,
      about,
      tags,
      lowercaseTags,
    })

    setIsSubmitting(false)
  }

  return (
    <div className={clsx('p-1', className)}>
      <label
        htmlFor="edit"
        className={clsx(
          'modal-button cursor-pointer whitespace-nowrap text-sm text-gray-700'
        )}
      >
        <PencilIcon className="inline h-4 w-4" /> Edit
      </label>
      <input type="checkbox" id="edit" className="modal-toggle" />

      <div className="modal">
        <div className="modal-box">
          <div className="form-control w-full">
            <label className="label">
              <span className="mb-1">Community name</span>
            </label>

            <input
              placeholder="Your fold name"
              className="input input-bordered resize-none"
              disabled={isSubmitting}
              value={name}
              onChange={(e) => setName(e.target.value || '')}
            />
          </div>

          <Spacer h={4} />

          <div className="form-control w-full">
            <label className="label">
              <span className="mb-1">About</span>
            </label>

            <input
              placeholder="Short description (140 characters max)"
              className="input input-bordered resize-none"
              disabled={isSubmitting}
              value={about}
              maxLength={140}
              onChange={(e) => setAbout(e.target.value || '')}
            />
          </div>

          <Spacer h={4} />

          <div className="form-control w-full">
            <label className="label">
              <span className="mb-1">Tags</span>
            </label>

            <input
              placeholder="Politics, Economics, Rationality"
              className="input input-bordered resize-none"
              disabled={isSubmitting}
              value={otherTags}
              onChange={(e) => setOtherTags(e.target.value || '')}
            />
          </div>

          <Spacer h={4} />
          <TagsList tags={tags} noLink noLabel />
          <Spacer h={4} />

          <div className="modal-action">
            <label
              htmlFor="edit"
              onClick={() => {
                if (confirm('Are you sure you want to delete this fold?')) {
                  deleteFold(fold)
                  router.replace('/folds')
                }
              }}
              className={clsx(
                'btn btn-sm btn-outline mr-auto self-center hover:border-red-500 hover:bg-red-500'
              )}
            >
              Delete
            </label>
            <label htmlFor="edit" className={clsx('btn')}>
              Cancel
            </label>
            <label
              className={clsx(
                'btn',
                saveDisabled ? 'btn-disabled' : 'btn-primary',
                isSubmitting && 'loading'
              )}
              htmlFor="edit"
              onClick={onSubmit}
            >
              Save
            </label>
          </div>
        </div>
      </div>
    </div>
  )
}