import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import React from 'react';
import { ScrollView, View } from 'react-native';

import MenuList from '../../components/List/MenuList';
import Title from '../../components/List/components/Title';
import Loader from '../../components/Loader/Loader';
import { NavProps } from '../../components/Routes/Routes';
import { useCampsAccess } from '../../hooks/useCamps';
import { useUserInfo } from '../../hooks/useStorage';
import { useUnitAccess } from '../../hooks/useUnit';
import UnitDetail from './screens/unitDetail';

const Unit = () => {
  const navigation = useNavigation<NavProps>();
  const [userInfo] = useUserInfo();

  const { hasAdvertisingAccess, isLoading: isAdvertisingAccessLoading } = useUnitAccess(
    userInfo.token,
    userInfo.unitId,
  );
  const { hasCampAccess, isLoading: isCampAccessLoading } = useCampsAccess(
    userInfo.token,
    userInfo.roleId,
  );

  const isLoading = isAdvertisingAccessLoading || isCampAccessLoading;
  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      {!isLoading ? (
        <ScrollView>
          <UnitDetail />
          <Title classNames="my-4" text="Agendy" />
          <MenuList
            items={[
              {
                title: 'Obecné akce',
                icon: <FontAwesome5 name="route" size={24} />,
                onPress: () => navigation.navigate('Events'),
                disabled: !hasCampAccess,
              },
              {
                title: 'Tábory',
                icon: <FontAwesome5 name="home" size={24} />,
                onPress: () => navigation.navigate('Camps'),
                disabled: !hasCampAccess,
              },
            ]}
          />

          <Title classNames="my-4" text="Nábory" />
          <MenuList
            items={[
              {
                title: 'Nábory',
                icon: <FontAwesome5 name="user-plus" size={24} />,
                onPress: () => navigation.navigate('UnitAdvertising'),
                disabled: !hasAdvertisingAccess,
              },
              {
                title: 'Odeslání e-přihlášky',
                icon: <FontAwesome name="send" size={24} />,
                onPress: () => navigation.navigate('UnitApplication'),
                disabled: !hasAdvertisingAccess,
              },
            ]}
          />

          <Title classNames="my-4" text="Exporty" />
          <MenuList
            items={[
              {
                title: 'Exporty',
                icon: <FontAwesome5 name="file-export" size={24} />,
                onPress: () => navigation.navigate('Templates'),
                disabled: !hasAdvertisingAccess,
              },
            ]}
          />
        </ScrollView>
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default Unit;
