import * as React from "react";
import { memo } from "react";
import { Image, TouchableOpacity } from "react-native";
import {
  HeaderContainer,
  LogoContainer,
  StyledNavButton,
  ActionButtonContainer,
} from "./styled";
import { useSiteSettings } from "../../providers/site";
import { ChannelSelectButton } from "../channel-select-button";
import useGetAbsoluteUrl from "../../hooks/use-get-absolute-url";

type Props = {
  actionButton: any;
  onOpenNavbar?: () => void;
  onOpenChannelsMenu?: () => void;
  onGoHome?: () => void;
};

function Header({
  actionButton,
  onGoHome,
  onOpenChannelsMenu,
  onOpenNavbar,
}: Props) {
  const getAbsoluteUrl = useGetAbsoluteUrl();
  const {
    style,
    regions: {
      header: { mobile_logo },
    },
  } = useSiteSettings();

  return (
    <HeaderContainer style={{ backgroundColor: style.background_color }}>
      <LogoContainer>
        <TouchableOpacity onPress={onGoHome}>
          <Image
            style={{ width: 100, height: 50 }}
            resizeMode="contain"
            source={{
              uri: getAbsoluteUrl(mobile_logo),
            }}
          />
        </TouchableOpacity>
      </LogoContainer>
      <ActionButtonContainer>{actionButton}</ActionButtonContainer>
      <StyledNavButton onPress={onOpenNavbar} />
      <ChannelSelectButton onPress={onOpenChannelsMenu} />
    </HeaderContainer>
  );
}

export default memo(Header);