/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React from 'react';
import { Button, Tag, Skeleton } from '@douyinfe/semi-ui';
import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';

/**
 * 横向筛选项行，自动换行
 * @param {string} title 标题
 * @param {Array<{value:any,label:string,icon?:React.ReactNode,tagCount?:number}>} items 选项列表
 * @param {*} activeValue 当前选中值
 * @param {(value:any)=>void} onChange 选择回调
 * @param {boolean} loading 加载中
 * @param {Function} t i18n
 */
const HorizontalFilterRow = ({
  title,
  items = [],
  activeValue,
  onChange,
  loading = false,
  t = (v) => v,
}) => {
  const showSkeleton = useMinimumLoadingTime(loading);

  if (showSkeleton) {
    return (
      <div className='mb-6'>
        <Skeleton.Title active style={{ width: 60, marginBottom: 8 }} />
        <div className='flex gap-2 flex-wrap'>
          {[1, 2, 3, 4, 5].map((i) => (
            <Skeleton.Button
              key={i}
              active
              style={{ width: 100, height: 32 }}
            />
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className='mb-6 last:mb-0'>
      <div className='text-sm font-medium text-semi-color-text-1 mb-3'>
        {title}
      </div>
      <div className='flex flex-wrap gap-2'>
        {items.map((item) => {
          const isDisabled =
            item.disabled ||
            (typeof item.tagCount === 'number' && item.tagCount === 0);
          const isActive = activeValue === item.value;

          return (
            <Button
              key={item.value}
              onClick={() => !isDisabled && onChange(item.value)}
              theme={isActive ? 'solid' : 'borderless'}
              type={isActive ? 'primary' : 'tertiary'}
              disabled={isDisabled}
              className='!rounded-full'
            >
              <span className='flex items-center gap-2'>
                {item.icon}
                <span>{item.label}</span>
                {item.tagCount !== undefined && (
                  <Tag
                    color={isActive ? 'white' : 'grey'}
                    shape='circle'
                    size='small'
                  >
                    {item.tagCount}
                  </Tag>
                )}
              </span>
            </Button>
          );
        })}
      </div>
    </div>
  );
};

export default HorizontalFilterRow;
