import * as React from "react";
import { useEffect, memo } from "react";
import { Image, TouchableOpacity, Easing } from "react-native";
import useChannelSelect from "../../components/channel-select/hooks/use-channel-select";
import useGetAbsoluteUrl from "../../hooks/use-get-absolute-url";
import { useFirebases } from "../../hooks/use-firebase/useFirebase";
import { ChannelItem } from "../channel";
import Modal from "react-native-modal";
import { useSiteSettings } from "../../providers/site";
import {
ChannelContainer,
ChannelItemContainer,
Head,
ChannelSelectedLine,
ShowChannel,
} from "./styled";
import Typography from "../ui/typography";
import Icon from "react-native-vector-icons/MaterialIcons";
import { SafeAreaView } from "react-native-safe-area-context";
const myIcon = ;
export interface Channel {
imgUri: string;
title: string;
metadata: T;
}
export type Props = {
visible: boolean;
onClose: () => void;
channels: Channel[];
channelSelectedIndex: number;
onChannelPress: (channel: Channel, index: number) => void;
};
const easing = Easing.bezier(0.34, 1.56, 0.64, 1);
function ChannelSelect({
visible,
onClose,
channels,
channelSelectedIndex,
onChannelPress,
}: Props) {
const { style: siteStyle } = useSiteSettings();
return (
CHANNELS
{myIcon}
{channels.map((channel, index) => (
{
onChannelPress(channel, index);
}}
>
{channelSelectedIndex === index ? : null}
))}
);
}
export type ChannelSelectProps = {
open: boolean;
onClose: () => void;
onChannelPress?: (channel: ChannelItem) => void;
};
export default memo(({ onClose, open, onChannelPress }: ChannelSelectProps) => {
const {
regions: {
"channel-select": { pages },
},
} = useSiteSettings();
const fetchedPages = useFirebases(
pages.map((page) => `/objects/${page.page._id}`)
);
const getAbsoluteUrl = useGetAbsoluteUrl();
const { channelSelect, currentChannel } = useChannelSelect(
fetchedPages
.filter(({ loading }) => !loading)
.map(({ data: channel }) => ({
title: channel.seo.title,
imgUri: getAbsoluteUrl(
channel.data.channel_select_active_image_url || ""
),
metadata: channel,
})),
(channel) => {},
open
);
useEffect(() => {
if (currentChannel)
if (onChannelPress) onChannelPress(currentChannel.metadata);
onClose();
}, [currentChannel ? currentChannel.metadata._id : undefined]);
return (
);
});