import { View } from 'react-native';

import { Icon } from '@/components/nativewindui/Icon';
import { Text } from '@/components/nativewindui/Text';
import {
  List,
  ListItem,
  ListSectionHeader,
  type ListDataItem,
  type ListRenderItemInfo,
} from '@/components/nativewindui/List';

export default function Screen() {
  return (
    <View className="flex-1">
      <List data={DATA} renderItem={renderItem} keyExtractor={keyExtractor} />
    </View>
  );
}

function renderItem(info: ListRenderItemInfo<(typeof DATA)[number]>) {
  if (typeof info.item === 'string') {
    return <ListSectionHeader {...info} />;
  }
  return (
    <ListItem
      leftView={
        <View className="flex-1 justify-center px-4">
          <View
            style={{ borderCurve: 'continuous' }}
            className="bg-primary/90 h-8 w-8 items-center justify-center rounded-lg">
            <Icon
              sfSymbol={{ name: info.item.icon.sfSymbol }}
              materialCommunityIcon={{ name: info.item.icon.materialCommunityIcon }}
              className="text-white"
            />
          </View>
        </View>
      }
      rightView={
        <View className="flex-1 justify-center px-4">
          <Text variant="caption1" className="ios:px-0 text-muted-foreground px-2">
            {'text' in info.item ? info.item.text : ''}
          </Text>
        </View>
      }
      {...info}
    />
  );
}

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

const DATA = [
  'Getting Started',
  {
    id: '1',
    title: 'Welcome',
    subTitle: 'Introduction to the app',
    icon: {
      sfSymbol: 'house',
      materialCommunityIcon: 'home',
    },
  },
  {
    id: '2',
    title: 'Sign Up',
    subTitle: 'Create your account',
    icon: {
      sfSymbol: 'person.badge.plus',
      materialCommunityIcon: 'account-plus',
    },
    text: 'Free',
  },
  {
    id: '3',
    title: 'Login',
    subTitle: 'Access your dashboard',
    icon: {
      sfSymbol: 'lock',
      materialCommunityIcon: 'lock',
    },
  },
  {
    id: '4',
    title: 'Profile Setup',
    subTitle: 'Add your details',
    icon: {
      sfSymbol: 'person.crop.circle',
      materialCommunityIcon: 'account-circle',
    },
    text: '25% left',
  },

  'Features',
  {
    id: '5',
    title: 'Dashboard',
    subTitle: 'Your app overview',
    icon: {
      sfSymbol: 'rectangle.grid.2x2',
      materialCommunityIcon: 'view-dashboard',
    },
  },
  {
    id: '6',
    title: 'Messages',
    subTitle: 'Chat with others',
    icon: {
      sfSymbol: 'bubble.left.and.bubble.right',
      materialCommunityIcon: 'chat',
    },
    text: '2 unread',
  },
  {
    id: '7',
    title: 'Notifications',
    subTitle: 'Stay up to date',
    icon: {
      sfSymbol: 'bell',
      materialCommunityIcon: 'bell-outline',
    },
    text: '5 new',
  },
  {
    id: '8',
    title: 'Settings',
    subTitle: 'Control your experience',
    icon: {
      sfSymbol: 'gear',
      materialCommunityIcon: 'cog-outline',
    },
  },

  'Security',
  {
    id: '9',
    title: 'Two-Factor Auth',
    subTitle: 'Add extra protection',
    icon: {
      sfSymbol: 'shield.lefthalf.fill',
      materialCommunityIcon: 'shield-lock',
    },
    text: 'Enabled',
  },
  {
    id: '10',
    title: 'Privacy',
    subTitle: 'Manage data access',
    icon: {
      sfSymbol: 'eye.slash',
      materialCommunityIcon: 'eye-off',
    },
    text: 'Standard',
  },
  {
    id: '11',
    title: 'Devices',
    subTitle: 'See where you’re logged in',
    icon: {
      sfSymbol: 'desktopcomputer',
      materialCommunityIcon: 'monitor',
    },
    text: '3 active',
  },
  {
    id: '12',
    title: 'Logout',
    subTitle: 'Sign out of your account',
    icon: {
      sfSymbol: 'arrow.right.square',
      materialCommunityIcon: 'logout',
    },
  },
] as const;