import {Center, Spinner, Text, View} from '@gluestack-ui/themed';

import {EventID} from '@event/types';

import EventManager from '@event/EventManager';
import {MyScreenContainer} from '@components/MyScreenContainer';
import {SourceProp} from '@user/types';
import MyImage from '@components/MyImage';
import {Image} from 'react-native';

function EventPageLoading() {
  // center also horizontally and vertically
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Spinner color="$secondary400" size={'large'} />
    </View>
  );
}

function EventPage({route}: {route: {params: {eventID: EventID}}}) {
  const {eventID} = route.params;

  const event = EventManager.getEventSelector(eventID);

  if (event.Name.source === SourceProp.online) return <EventPageLoading />;

  let image = event.EventBannerPicture.hq;
  if (image === undefined) {
    image = event.EventBannerPicture.lq;
  }

  const imageUrl =
    'https://res.cloudinary.com/coin-nft/image/upload/c_limit,q_auto,w_329/f_auto/v1/cache/1/f2/65/f26573682335fe72b50f0f74041736905308345d6043abbac832856b3a4d2246-ZGMwNDMxZTktYTY4NS00OTQ1LWJiYmUtMDRhY2Q0YzUzMjAy?_a=ATCkFAA0';

  useEffect(() => {
    // Fetch the image dimensions and calculate the aspect ratio
    Image.getSize(
      imageUrl,
      (width, height) => {
        const calculatedAspectRatio = width / height;
        setAspectRatio(calculatedAspectRatio);
      },
      error => {
        console.error('Error getting image size: ', error);
      },
    );
  }, [imageUrl]);

  return (
    <MyScreenContainer scrollView={true}>
      {
        <>
          <Text>{event.Name.data}</Text>
          <Image
            source={{
              uri: imageUrl,
            }}
            style={{width: '100%', height: 400}}
            alt="Event banner"
          />
          <Text>{event.Description.data}</Text>
        </>
      }
    </MyScreenContainer>
  );
}

export default EventPage;
