import { useState } from 'react';
import { Button } from '@ablogcms/components/button';
import IconPicker from '@ablogcms/components/icon-picker';
import { HStack } from '@ablogcms/components/stack';
import { dialog } from '@ablogcms/dialog';

interface AdminNewCardProps {
  laneId: string;
  onAdd(card: { title: string; label: string; description: string; [key: string]: unknown }): void;
  onCancel(): void;
}

function AdminNewCard({ laneId, onAdd, onCancel }: AdminNewCardProps) {
  const [title, setTitle] = useState('');
  // UI に label の入力欄が無いため常に空文字（カード編集フォーム側にも label 欄は無い）
  const label = '';
  const [icon, setIcon] = useState('');
  const [url, setUrl] = useState('');

  const add = async () => {
    if (url && title) {
      onAdd({ title, label, icon, url, description: '' });
      return;
    }
    await dialog.alert(ACMS.i18n('admin_menu.card_add_alert'));
  };

  return (
    <div className="acms-admin-kanban-card">
      <div style={{ whiteSpace: 'normal' }} className="acms-admin-form acms-admin-menu-new-card-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.add_icon')}</span>
            <div>
              <IconPicker onChange={setIcon} />
            </div>
          </div>
          <div className="acms-admin-menu-card-row">
            <label htmlFor={`input-text-admin-menu-add-title-${laneId}`} className="acms-admin-menu-field-label">
              {ACMS.i18n('admin_menu.add_title')}
            </label>
            <div>
              <input
                id={`input-text-admin-menu-add-title-${laneId}`}
                type="text"
                placeholder={ACMS.i18n('admin_menu.add_title')}
                className="acms-admin-form-width-full"
                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                  setTitle(event.target.value);
                }}
                onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
                  if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
                    event.preventDefault();
                    add();
                  }
                }}
              />
            </div>
          </div>
          <div className="acms-admin-menu-card-row">
            <label htmlFor={`input-text-admin-menu-url-${laneId}`} className="acms-admin-menu-field-label">
              {ACMS.i18n('admin_menu.url')}
            </label>
            <div>
              <input
                id={`input-text-admin-menu-url-${laneId}`}
                type="url"
                placeholder="URL"
                className="acms-admin-form-width-full"
                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                  setUrl(event.target.value);
                }}
                onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
                  if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
                    event.preventDefault();
                    add();
                  }
                }}
              />
            </div>
          </div>
          <HStack justify="end">
            <Button variant="text" onClick={onCancel}>
              {ACMS.i18n('admin_menu.cancel')}
            </Button>
            <Button variant="success" onClick={add}>
              {ACMS.i18n('admin_menu.add')}
            </Button>
          </HStack>
        </div>
      </div>
    </div>
  );
}

export default AdminNewCard;
