/* eslint-disable react/react-in-jsx-scope */
import { Env } from '@env';
import { useColorScheme } from 'nativewind';

import { Item } from '@/components/settings/item';
import { ItemsContainer } from '@/components/settings/items-container';
import { LanguageItem } from '@/components/settings/language-item';
import { ThemeItem } from '@/components/settings/theme-item';
import {
  colors,
  FocusAwareStatusBar,
  ScrollView,
  Text as RNText,
  View,
} from '@/components/ui';
import { Github, Rate, Share, Support, Website } from '@/components/ui/icons';
import { translate, useAuth } from '@/lib';
import TopNavigation from '@/library/top-navigation';
import Text from '@/library/text';
import Chip from '@/library/chip';
import Spinner from '@/library/spinner';
import React from 'react';
import MainPageHeader from '@/library/main-page-header';
import Avatar from '@/library/avatar';
import PageIndicator from '@/library/pageIndicator';

export default function Settings() {
  const signOut = useAuth.use.signOut();
  const { colorScheme } = useColorScheme();
  const iconColor =
    colorScheme === 'dark' ? colors.neutral[400] : colors.neutral[500];
  return (
    <>
      <TopNavigation backgroundColor="white" barStyle={'dark-content'}>
        <MainPageHeader
          tabTitle={['테스트']}
          activeTab="테스트"
          selectOnPress={() => {
            console.log('SELECT TAB');
          }}
          select={true}

          // funcComponent={[
          //   <IconButton
          //     required={true}
          //     icon={<TestCircle />}
          //     onPress={() => {
          //       console.log('CLICK');
          //       searchBarRef.current?.blur();
          //     }}
          //   />,
          // ]}
        />
        <View className="flex-1 justify-center items-center bg-black">
          {/* <Avatar imgUrl="https://picsum.photos/200/300" size={16} />
          <Avatar imgUrl="https://picsum.photos/200/300" size={20} />
          <Avatar imgUrl="https://picsum.photos/200/300" size={24} />
          <Avatar imgUrl="https://picsum.photos/200/300" size={32} />
          <Avatar imgUrl="https://picsum.photos/200/300" size={40} />
          <Avatar imgUrl="https://picsum.photos/200/300" size={56} /> */}

          <Chip
            variant="outline"
            size="small"
            text="레이블"
            shape="round"
            onPress={() => console.log('pressed')}
          />
          <Chip
            variant={'staticWhite'}
            shape={'round'}
            text={'랜덤 추천'}
            size={'small'}
            onPress={() => console.log('pressed')}
          />
          <Chip
            variant="neutralLow"
            size="small"
            text="레이블"
            onPress={() => console.log('pressed')}
          />
          <PageIndicator current={1} total={10} />
          <Spinner size="small" color="red" />
          <Spinner size="medium" color="blue" />
          <Spinner size="large" color="green" />
          <Spinner size="xlarge" color="yellow" />
        </View>
        {/* <View className="flex-1 justify-center items-center bg-gray-500 gap-2">
          <View className="flex-row gap-[6px]">
            <CustomIndicator size="xlarge" color="blue" state={1} />
            <CustomIndicator size="xlarge" color="blue" state={2} />
            <CustomIndicator size="xlarge" color="blue" state={3} />
            <CustomIndicator size="xlarge" color="blue" state={4} />

           
            <Chip
              variant={'staticWhite'}
              shape={'round'}
              text={'내 주변 여행지 찾기'}
              size={'small'}
              onPress={() => {
                console.log('내 주변 여행지 찾기');
              }}
            />
          </View>
          <Chip
            variant="outline"
            size="small"
            text="레이블"
            shape="round"
            onPress={() => console.log('pressed')}
          />
          <Chip
            variant="outline"
            size="small"
            text="레이블"
            shape="round"
            onPress={() => console.log('pressed')}
          />
          <Chip
            variant="neutralLow"
            size="small"
            text="레이블"
            onPress={() => console.log('pressed')}
          />
          <Chip
            variant="staticWhite"
            size="small"
            text="레이블"
            onPress={() => console.log('pressed')}
          />
          <Chip
            variant="outline"
            size="medium"
            text="레이블"
            onPress={() => console.log('pressed')}
          />
          <Chip
            variant="neutralLow"
            size="medium"
            text="레이블"
            onPress={() => console.log('pressed')}
          />
          <Chip
            variant="staticWhite"
            size="medium"
            text="레이블"
            onPress={() => console.log('pressed')}
          />
        </View> */}
      </TopNavigation>
      {/* <TopNavigation backgroundColor="white" barStyle={'light-content'}>
        <ScrollView>
          <View className="flex-1 px-4 pt-16 ">
            <Text className="text-xl font-bold">
              {translate('settings.title')}
            </Text>
            <ItemsContainer title="settings.generale">
              <LanguageItem />
              <ThemeItem />
            </ItemsContainer>

            <ItemsContainer title="settings.about">
              <Item text="settings.app_name" value={Env.NAME} />
              <Item text="settings.version" value={Env.VERSION} />
            </ItemsContainer>

            <ItemsContainer title="settings.support_us">
              <Item
                text="settings.share"
                icon={<Share color={iconColor} />}
                onPress={() => {}}
              />
              <Item
                text="settings.rate"
                icon={<Rate color={iconColor} />}
                onPress={() => {}}
              />
              <Item
                text="settings.support"
                icon={<Support color={iconColor} />}
                onPress={() => {}}
              />
            </ItemsContainer>

            <ItemsContainer title="settings.links">
              <Item text="settings.privacy" onPress={() => {}} />
              <Item text="settings.terms" onPress={() => {}} />
              <Item
                text="settings.github"
                icon={<Github color={iconColor} />}
                onPress={() => {}}
              />
              <Item
                text="settings.website"
                icon={<Website color={iconColor} />}
                onPress={() => {}}
              />
            </ItemsContainer>

            <View className="my-8">
              <ItemsContainer>
                <Item text="settings.logout" onPress={signOut} />
              </ItemsContainer>
            </View>
          </View>
        </ScrollView>
      </TopNavigation> */}
    </>
  );
}