import * as React from "react";
import { useCallback, useContext } from "react";
import { View, StyleSheet, Text } from "react-native";
import { SiteImage } from "../site-image";
import { spacing } from "../../theme";
import Button from "../ui/button";
import { SpotlightItem } from "./landing";
import { PageContext } from "../page/page-context";
import { ChannelItem } from "../channel";

export interface SpotlightProps {
  data: SpotlightItem;
}

const style = StyleSheet.create({
  container: {
    overflow: "hidden",
    minHeight: 140,
    position: "relative",
    marginBottom: spacing[4],
  },
  button: { alignSelf: "flex-start" },
  title: {
    fontSize: 19,
    marginBottom: 10,
    color: "#fff",
    textShadowColor: "rgba(0, 0, 0, 0.9)",
    textShadowOffset: { width: -2, height: 2 },
    textShadowRadius: 5,
  },
  content: {
    position: "absolute",
    top: "50%",
    marginTop: -45,
    marginLeft: 20,
  },
});

export const Spotlight = ({ data }: SpotlightProps) => {
  const { onChangeChannel } = useContext(PageContext);
  const onButtonPress = useCallback(() => {
    if (data.link_data?._id) {
      onChangeChannel({ _id: data.link_data._id } as ChannelItem);
      // navigation.push(
      //   'page-view',
      //   {pageId: data.link_data._id},
      //   data.link_data._id,
      // );
    }
  }, [data]);

  return (
    <View style={style.container}>
      {data.image_src ? (
        <SiteImage
          resizeMode="cover"
          src={data.image_src}
          setOriginalSize
          fit
        />
      ) : null}
      <View style={style.content}>
        {data.button_text ? (
          <>
            <Text style={style.title}>{data.spotlight_text}</Text>
            <Button
              variant="filled"
              style={style.button}
              label={data.button_text}
              onPress={onButtonPress}
            />
          </>
        ) : null}
      </View>
    </View>
  );
};