import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
import { useNavigation, useRoute } from '@react-navigation/native';
import cn from 'classnames';
import React, { useLayoutEffect } from 'react';
import { 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, RouteProps } from '../../../../components/Routes/Routes';
import { useUserInfo } from '../../../../hooks/useStorage';
import { useUnitAccess, useUnitDetail } from '../../../../hooks/useUnit';

const UnitMenu = () => {
  const props = useRoute<RouteProps<'UnitDetail'>>();
  const [userInfo] = useUserInfo();
  const navigation = useNavigation<NavProps>();
  const { data: unit } = useUnitDetail(userInfo.token, props?.params?.id || userInfo.unitId);
  const { hasMembersAccess, hasRegistrationAccess, isLoading } = useUnitAccess(
    userInfo.token,
    props?.params?.id || userInfo.unitId,
  );

  useLayoutEffect(() => {
    if (props?.params) {
      navigation.setOptions({
        title: unit?.displayName,
      });
    }
  }, [navigation, unit]);
  return (
    <View className={cn({ 'm-4 flex-1 bg-primary-bg': props?.params })}>
      {isLoading ? (
        <Loader />
      ) : (
        <>
          {!props?.params && <Title classNames="mb-4" text={unit?.displayName || ''} />}
          <MenuList
            items={[
              {
                title: 'Informace',
                subtitle: 'Obsahuje údaje, kontakty a funkce',
                icon: <FontAwesome5 name="info-circle" size={24} />,
                onPress: () =>
                  navigation.navigate('UnitInfo', {
                    id: props.params?.id || userInfo.unitId,
                  }),
              },
            ]}
          />
          <View className="mt-4 flex-row justify-between">
            <MenuList
              classNames="w-[48%]"
              items={[
                {
                  title: 'Členové',
                  icon: <FontAwesome5 name="users" size={24} />,
                  onPress: () =>
                    navigation.navigate('UnitMembers', {
                      id: props.params?.id || userInfo.unitId,
                    }),
                  disabled: !hasMembersAccess,
                },
              ]}
            />

            <MenuList
              classNames="w-[48%]"
              items={[
                {
                  title: 'Registrace',
                  icon: <FontAwesome name="bar-chart" size={24} />,
                  onPress: () =>
                    navigation.navigate('UnitRegistration', {
                      id: props.params?.id || userInfo.unitId,
                    }),
                  disabled: !hasRegistrationAccess,
                },
              ]}
            />
          </View>
        </>
      )}
    </View>
  );
};

export default UnitMenu;
