import { useState } from 'react';
import { Button } from '@ablogcms/components/button';
import IconPicker from '@ablogcms/components/icon-picker';
import { dialog } from '@ablogcms/dialog';
import type { AdminCardType } from '../../types';

interface AdminCardProps {
  card: AdminCardType;
  onDelete(): void;
  doneEdit(edit: AdminCardType): void;
}

function AdminCard({ card, onDelete, doneEdit }: AdminCardProps) {
  const [editMode, setEditMode] = useState(false);
  const [title, setTitle] = useState(card.title);
  const [url, setUrl] = useState(card.url);
  const [icon, setIcon] = useState(card.icon);

  const { id, laneId, index, label, admin } = card;

  const handleRemove = async (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation();
    if (await dialog.confirm(ACMS.i18n('admin_menu.menu_remove_confirm'))) {
      onDelete();
    }
  };

  const handleDoneEdit = async () => {
    if (!title && !url) {
      await dialog.alert(ACMS.i18n('admin_menu.enter_both_title_and_url'));
      return;
    }
    setEditMode(false);
    doneEdit({
      id,
      laneId,
      title,
      url,
      label,
      index,
      icon,
      admin,
    });
  };

  return (
    <>
      {editMode && (
        <div className="acms-admin-form">
          <div className="acms-admin-menu-card-inner">
            <div className="acms-admin-menu-card-row">
              <span className="acms-admin-menu-field-label">{ACMS.i18n('admin_menu.icon')}</span>
              <div>
                <IconPicker defaultValue={icon} onChange={setIcon} />
              </div>
            </div>
            <div className="acms-admin-menu-card-row">
              <label htmlFor={`input-text-admin-menu-title-${id}`} className="acms-admin-menu-field-label">
                {ACMS.i18n('admin_menu.title')}
              </label>
              <div>
                <input
                  id={`input-text-admin-menu-title-${id}`}
                  type="text"
                  placeholder={ACMS.i18n('admin_menu.title')}
                  className="acms-admin-form-width-full"
                  value={title}
                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                    setTitle(event.target.value);
                  }}
                  onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
                    if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
                      event.preventDefault();
                      handleDoneEdit();
                    }
                  }}
                />
              </div>
            </div>
            {!admin && (
              <div className="acms-admin-menu-card-row">
                <label htmlFor={`input-text-admin-menu-url-${id}`} className="acms-admin-menu-field-label">
                  {ACMS.i18n('admin_menu.url')}
                </label>
                <div>
                  <input
                    id={`input-text-admin-menu-url-${id}`}
                    type="text"
                    placeholder="URL"
                    className="acms-admin-form-width-full"
                    value={url}
                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                      setUrl(event.target.value);
                    }}
                    onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
                      if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
                        event.preventDefault();
                        handleDoneEdit();
                      }
                    }}
                  />
                </div>
              </div>
            )}
            <div className="clearfix">
              <Button className="acms-admin-float-right" onClick={handleDoneEdit}>
                {ACMS.i18n('admin_menu.complete')}
              </Button>
              {!admin && (
                <Button
                  variant="danger"
                  className="acms-admin-float-right"
                  style={{ marginRight: '10px' }}
                  onClick={handleRemove}
                >
                  {ACMS.i18n('admin_menu.remove')}
                </Button>
              )}
            </div>
          </div>
        </div>
      )}
      {!editMode && (
        <div className="acms-admin-menu-card-title">
          <div className="acms-admin-menu-card-item">
            <span className="acms-admin-icon-sort acms-admin-menu-card-sort" />
            <Button className="acms-admin-menu-card-edit-btn" onClick={() => setEditMode(true)}>
              {ACMS.i18n('admin_menu.edit')}
            </Button>
            <div className="acms-admin-menu-card-name">
              <span className="acms-admin-menu-card-icon">{icon && <span className={icon} aria-hidden />}</span>
              {title}
            </div>
          </div>
        </div>
      )}
    </>
  );
}

export default AdminCard;
