import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconMapPin} from '@tabler/icons-react-native';
import {Avatar, Skeleton, Spinner, Title} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

function LocationsLoaderSk() {
  const [longLoader, setLongLoader] = useState(false);
  const {t} = useTranslation();
  const {theme, borderRadius} = useTheme();

  useEffect(() => {
    setTimeout(() => setLongLoader(true), 5000);
  }, []);

  return (
    <Skeleton>
      <Skeleton.Item height={82} style={styles.checkerClockBottom} />
      {longLoader ? (
        <View
          style={[
            styles.loaderContainer,
            {
              backgroundColor: theme.background.layout.tertiary,
              borderRadius: borderRadius.l,
            },
          ]}>
          <Avatar Icon={IconMapPin} variant="primary" />
          <Title
            title={t('time_tracker.searching_location')}
            description={t('time_tracker.searching_location_description')}
            descriptionNumberOfLines={3}
            titleNumberOfLines={2}
            center
          />
          <Spinner />
        </View>
      ) : (
        <Skeleton.Item height={350} />
      )}
    </Skeleton>
  );
}

export default LocationsLoaderSk;