import { useCallback, useEffect, useState } from 'react';
import { FilterFormControl, FilterGroupV2, FilterItem, FilterItemLabel } from '@ablogcms/components/filter';
import { RichSelect } from '@ablogcms/components/rich-select';
import { AcmsContext } from '@ablogcms/url/types';
import useEntryTags from '../../hooks/use-entry-tags';

interface EntryTagFilterProps {
  context: AcmsContext;
}

/**
 * エントリー管理画面の高度絞り込み内に表示するタグ絞り込み UI。
 *
 * 選択中タグに応じて候補（関連タグ）を再取得し、選択されたタグは hidden として送信する。
 * hidden の name は `tag[]` で、tag は acmsPath が URL パスへ変換する（query[] には含めない）。
 */
function EntryTagFilter({ context }: EntryTagFilterProps) {
  const [selectedTags, setSelectedTags] = useState<string[]>(context.tag ?? []);
  useEffect(() => {
    setSelectedTags(context.tag ?? []);
  }, [context.tag]);

  const handleTagSelectChange = useCallback((options: readonly { value: string; label: string }[] | null) => {
    setSelectedTags(options ? options.map((option) => option.value) : []);
  }, []);

  const { tags: tagOptions } = useEntryTags({ ...context, tag: selectedTags });

  // カスタムフィールド絞り込み（dataview-filter-row）の項目名・条件・値の3列分に横幅を合わせる。
  // md 以上で各列 minmax(0, 220px) が3つ + 列間 gap 8px が2つ = 220px * 3 + 8px * 2。
  const filterFormControlWidth = 'min(100%, calc(220px * 3 + 8px * 2))';

  return (
    <FilterGroupV2>
      <FilterItem id="filter-item-tag" style={{ flexBasis: '100%', width: '100%', justifyContent: 'flex-start' }}>
        <FilterFormControl
          style={{ '--acms-admin-filter-form-control-width': filterFormControlWidth } as React.CSSProperties}
        >
          <FilterItemLabel htmlFor="filter-tag">{ACMS.i18n('entry_index.filter.tag')}</FilterItemLabel>
          <RichSelect<{ value: string; label: string }, true>
            isMulti
            closeMenuOnSelect={false}
            inputId="filter-tag"
            className="acms-admin-form-width-full"
            defaultValue={context.tag?.map((tag) => ({ value: tag, label: tag })) ?? []}
            isClearable
            placeholder={ACMS.i18n('select.not_selected')}
            noOptionsMessage={() => ACMS.i18n('tag.select_notfound')}
            key={context.tag?.join(',')}
            options={tagOptions.map((tag) => ({ value: tag, label: tag }))}
            onChange={handleTagSelectChange}
          />
          {selectedTags.map((tag) => (
            <input key={tag} type="hidden" name="tag[]" value={tag} />
          ))}
        </FilterFormControl>
      </FilterItem>
    </FilterGroupV2>
  );
}

export default EntryTagFilter;
