import { TYSectionList } from 'tuya-panel-kit'

const [state, set] = React.useState({
  value: -1,
  sliderValue: 50,
  name: '',
  switchValue: true,
});
const setState = value => set({ ...state, ...value });
const sections = [
  {
    title: 'Basic list item',
    data: [
      {
        key: 0,
        theme: { descFontColor: '#FF4444' },
        title: `List title`,
        subTitle: `List subtitle`,
        value: 'New',
        arrow: true,
        Action: (
          <View
            style={{
              paddingHorizontal: 4,
              borderRadius: 8,
              backgroundColor: '#FF4444',
            }}
          >
            <TYText type="paragraph" size="normal" text="New" color="#fff" />
          </View>
        ),
      },
    ],
    renderItem: ({ item }) => <TYSectionList.Item {...item} />,
  },
  {
    title: 'Select box list item',
    data: [
      {
        key: 0,
        theme: { descFontColor: '#7ED321' },
        Action: 'Cleaned successfully',
        title: `April 11th, 23:15`,
        subTitle: `Cleaning 0 square meters | work 5 minutes`,
        checked: state.value === 0,
        onChange: checked => setState({ value: checked ? 0 : -1 }),
      },
    ],
    renderItem: ({ item }) => <TYSectionList.CheckboxItem {...item} />,
  },
  {
    title: 'Slider list item',
    data: [
      {
        key: 0,
        actionType: 'iconfont',
        Icon: 'volume-sharp-off',
        Action: 'volume-sharp-max',
        value: state.sliderValue,
        minimumValue: 0,
        maximumValue: 100,
        canTouchTrack: true,
        onSlidingComplete: sliderValue => setState({ sliderValue }),
      },
    ],
    renderItem: ({ item }) => <TYSectionList.SliderItem {...item} />,
  },
  {
    title: 'Input box list item',
    data: [
      {
        key: 0,
        title: `Name`,
        value: state.name,
        placeholder: 'Enter name',
        onChangeText: name => setState({ name }),
      },
    ],
    renderItem: ({ item }) => <TYSectionList.InputItem {...item} />,
  },
  {
    title: 'Switch list item adaptation',
    data: [
      {
        key: 0,
        title: 'The situation where the title of the list is too long --- ',
        subTitle:
          'This is the case where the detailed information content of this list is too long',
        value: state.switchValue,
        onValueChange: value => setState({ switchValue: value }),
      },
    ],
    renderItem: ({ item }) => <TYSectionList.SwitchItem {...item} />,
  },
];

<TYSectionList
  style={{ alignSelf: 'stretch' }}
  sections={sections}
  renderItem={({ item }) => <TYSectionList.CheckboxItem {...item} />}
/>