import { useNavigation } from '@react-navigation/native';
import React from 'react';
import { View, Text, ScrollView } from 'react-native';

import Button from '../../../../components/Button/Button';
import Dropdown from '../../../../components/Dropdown/Dropdown';
import ClickableList from '../../../../components/List/ClickableList';
import Title from '../../../../components/List/components/Title';
import Loader from '../../../../components/Loader/Loader';
import { NavProps } from '../../../../components/Routes/Routes';
import TextFieldClickable from '../../../../components/TextField/TextFieldClickable';
import { useUserInfo } from '../../../../hooks/useStorage';
import { useUnitAdvertising } from '../../../../hooks/useUnitAdvertising';
import {
  AdvertisingCategoryAllResponse,
  MeetingDateAllResponse,
} from '../../../../services/api/APIS/OrganizationUnit/types';

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

  const { advertising, isLoading } = useUnitAdvertising(userInfo.token, userInfo.unitId);

  return (
    <View className="m-4 flex-1 justify-start bg-primary-bg">
      {!isLoading ? (
        <ScrollView>
          <Title classNames="mb-4" text={advertising?.unit || ''} />

          <View className="rounded bg-secondary-bg p-4">
            <TextFieldClickable
              title="Poznámka"
              value={advertising.note || ''}
              onPress={() => navigation.navigate('UnitAdvertisingNoteEdit')}
            />
          </View>

          <Dropdown title="Termíny schůzek" defaultOpen>
            <ClickableList
              items={advertising.meetingDates.map((meetingDate: MeetingDateAllResponse) => {
                return {
                  title: meetingDate.displayName,
                  onPress: () =>
                    navigation.navigate('UnitAdvertisingMeetingDate', {
                      id: meetingDate.id,
                    }),
                };
              })}
              emptyElement={<Text className="rounded bg-secondary-bg p-4">Žádné schůzky.</Text>}
            />
            <Button
              classNames="mb-4 mx-4 -mt-4"
              variant="ternary"
              onPress={() =>
                navigation.navigate('UnitAdvertisingMeetingDateEdit', { id: undefined })
              }
            >
              Přidat schůzku
            </Button>
          </Dropdown>

          <Dropdown title="Náborové kategorie" defaultOpen>
            <ClickableList
              items={advertising.categories.map((category: AdvertisingCategoryAllResponse) => {
                return {
                  title: category.meetingDate ? category.meetingDate : 'Žádná schůzka',
                  subtitle: `Pro pohlaví ${category.sex}`,
                  onPress: () =>
                    navigation.navigate('UnitAdvertisingCategory', {
                      id: category.id,
                    }),
                };
              })}
              emptyElement={<Text className="rounded bg-secondary-bg p-4">Žádné kategorie.</Text>}
            />

            <Button
              classNames="mb-4 mx-4 -mt-4"
              variant="ternary"
              onPress={() => navigation.navigate('UnitAdvertisingCategoryEdit', { id: undefined })}
            >
              Přidat kategorii
            </Button>
          </Dropdown>
        </ScrollView>
      ) : (
        <Loader />
      )}
    </View>
  );
};

export default UnitAdvertising;
