import { BfSortableGroup, BfSortableItem } from '@bud-fe/react-taro-ui';
import { View } from '@tarojs/components';
import React from 'react';

export default () => {
  const handleOnItemClick = (id, newStatus) => {
    console.log('handleOnItemClick', { id, newStatus });
  };

  const handleOnSortItemsChange = (sortItems) => {
    console.log('handleOnSortItemsChange', sortItems);
  };

  return (
    <>
      <View className="group-title">SortableItem - 基础用法 </View>
      <BfSortableItem status="UP" onItemClick={handleOnItemClick}>
        <View>status="UP"</View>
      </BfSortableItem>
      <BfSortableItem status="DOWN" onItemClick={handleOnItemClick}>
        <View>status="DOWN"</View>
      </BfSortableItem>
      <BfSortableItem onItemClick={handleOnItemClick}>
        <View>status="UNKNOWN"</View>
      </BfSortableItem>
      <View className="group-title">SortableGroup - 基础用法 </View>
      <BfSortableGroup
        sortItems={[
          { label: 'item1', value: 1, status: 'UP' },
          { label: 'item2', value: 2 },
          { label: 'item3', value: 3 },
        ]}
        onSortItemsChange={handleOnSortItemsChange}
      />
    </>
  );
};