import { ListRenderItemInfo } from '@shopify/flash-list';
import { Stack } from 'expo-router';
import { View } from 'react-native';

import { Text } from '~/components/nativewindui/Text';
import { ESTIMATED_ITEM_HEIGHT, List, ListDataItem, ListItem, ListSectionHeader } from '../List';

export default function ListScreen() {
  return (
    <>
      <Stack.Screen options={{ title: 'Insets' }} />
      <List
        variant="insets"
        data={DATA}
        estimatedItemSize={ESTIMATED_ITEM_HEIGHT.titleOnly}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
      />
    </>
  );
}

function renderItem<T extends ListDataItem>(info: ListRenderItemInfo<T>) {
  if (typeof info.item === 'string') {
    return <ListSectionHeader {...info} />;
  }
  return (
    <ListItem
      leftView={
        <View className="flex-1 justify-center px-4">
          <View className="aspect-square h-8 rounded bg-red-500" />
        </View>
      }
      rightView={
        <View className="flex-1 justify-center px-4">
          <Text variant="caption1" className="ios:px-0 text-muted-foreground px-2">
            100+
          </Text>
        </View>
      }
      {...info}
      onPress={() => console.log('onPress')}
    />
  );
}

function keyExtractor(item: (Omit<ListDataItem, string> & { id: string }) | string) {
  return typeof item === 'string' ? item : item.id;
}

const DATA = [
  'Header',
  {
    id: '1',
    title: 'Hello',
    subTitle: 'World',
  },
  {
    id: '2',
    title: 'Hello',
    subTitle: 'World',
  },

  {
    id: '3',
    title: 'Hello',
    subTitle: 'World',
  },
  {
    id: '4',
    title: 'Hello',
    subTitle: 'World',
  },
  'Header 2',
  {
    id: '5',
    title: 'Hello',
    subTitle: 'World',
  },
  {
    id: '6',
    title: 'Hello',
    subTitle: 'World',
  },

  {
    id: '7',
    title: 'Hello',
    subTitle: 'World',
  },
  {
    id: '8',
    title: 'Hello',
    subTitle: 'World',
  },
  'Header 3',
  {
    id: '9',
    title: 'Hello',
    subTitle: 'World',
  },
  {
    id: '10',
    title: 'Hello',
    subTitle: 'World',
  },

  {
    id: '11',
    title: 'Hello',
    subTitle: 'World',
  },
  {
    id: '12',
    title: 'Hello',
    subTitle: 'World',
  },
];