import { DeleteFilled, EditFilled } from '@ant-design/icons';
import {
  Button,
  Checkbox,
  type CheckboxChangeEvent,
  Divider,
  Empty,
  List,
  Skeleton,
} from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
import type { GroupItem, TagItem } from './types';

interface GroupsProps {
  groups: GroupItem[];
  onGroupClick: (group: GroupItem) => void;
  currentId?: number;
  editable?: boolean;
  total?: number;
  loadMoreData?: () => void;
  pageSize?: number;
  onEdit?: (group: GroupItem) => void;
  onDelete?: (id: number) => void;
}
export const renderGroups = (data: GroupsProps) => {
  const {
    groups,
    currentId,
    total = groups.length,
    onEdit,
    onDelete,
    loadMoreData,
    onGroupClick,
    pageSize = 10,
    editable = false,
  } = data;
  const hasMore = groups.length < total * pageSize;
  if (groups.length === 0) {
    return (
      <Empty description="暂无分组" image={Empty.PRESENTED_IMAGE_SIMPLE} />
    );
  }

  return (
    <InfiniteScroll
      dataLength={groups.length}
      next={loadMoreData ? loadMoreData : () => {}}
      hasMore={loadMoreData ? hasMore : false}
      loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
      endMessage={loadMoreData ? <Divider plain>我已经是底线了</Divider> : ''}
      scrollableTarget="scrollableDiv"
    >
      <List
        dataSource={groups}
        renderItem={(item) => (
          <List.Item
            key={item.id}
            onClick={() => onGroupClick(item)}
            className={`group-item ${currentId === item.id ? 'active' : ''}`}
          >
            <div>{item.groupName}</div>
            {editable && (
              <div className="group-options">
                <Button
                  type="link"
                  size="small"
                  icon={<EditFilled />}
                  onClick={(e) => {
                    e.stopPropagation();
                    onEdit?.(item);
                  }}
                />
                <Button
                  type="link"
                  size="small"
                  icon={<DeleteFilled />}
                  onClick={(e) => {
                    e.stopPropagation();
                    onDelete?.(item.id);
                  }}
                />
              </div>
            )}
          </List.Item>
        )}
      />
    </InfiniteScroll>
  );
};

interface GroupTagProps {
  list: TagItem[];
  total: number;
  // onTagItemClick: (tag: TagItem) => void;
  onEdit?: (tag: TagItem) => Promise<void> | void;
  loadMoreData: () => void;
  onDelete?: (id: number) => void;
  editable?: boolean;
  pageSize?: number;
  value: TagItem[];
  onTagItemChange: (tag: TagItem, e: CheckboxChangeEvent) => void;
}
export const renderTags = (data: GroupTagProps) => {
  const {
    list,
    total = list.length,
    loadMoreData,
    onEdit,
    onDelete,
    onTagItemChange,
    editable,
    value,
  } = data;
  if (list.length === 0) {
    return (
      <Empty description="暂无分组" image={Empty.PRESENTED_IMAGE_SIMPLE} />
    );
  }
  console.log(list, total);
  return (
    <InfiniteScroll
      dataLength={list.length}
      next={loadMoreData}
      hasMore={list.length < total}
      loader={<Skeleton paragraph={{ rows: 1 }} active />}
      endMessage={<Divider plain>我已经是底线了</Divider>}
      scrollableTarget="scrollableDiv"
    >
      <List
        dataSource={list}
        renderItem={(item) => (
          <List.Item
            key={item.id}
            // onClick={() => onTagItemClick(item)}
            className="tag-item"
          >
            <div>
              {!editable && (
                <Checkbox
                  checked={
                    // value.find((tag) => tag.id === item.id) ? true : false
                    !!value.find((tag) => tag.id === item.id)
                  }
                  onChange={(e) => onTagItemChange(item, e)}
                  style={{ marginRight: '8px' }}
                />
              )}
              {item.tagName}
            </div>

            {editable && (
              <div className="group-options">
                <Button
                  type="link"
                  size="small"
                  icon={<EditFilled />}
                  onClick={(e) => {
                    e.stopPropagation();
                    onEdit?.(item);
                    // onEditGroup(item.id);
                  }}
                />
                <Button
                  type="link"
                  size="small"
                  icon={<DeleteFilled />}
                  onClick={(e) => {
                    e.stopPropagation();
                    onDelete?.(item.id);
                  }}
                />
              </div>
            )}
          </List.Item>
        )}
      />
    </InfiniteScroll>
  );
};
