import React, { FC } from "react";
import { View, Text, TouchableOpacity, TextStyle } from "react-native";

type Props = {
  LeftItem?: SideItemProps;
  RightItem?: SideItemProps;
  title: string;
};

const textStyle: TextStyle = {
  fontSize: 20,
  fontWeight: "bold",
  color: "white",
  padding: 10,
  textAlignVertical: "center",
};
export const SheetHeaderItem: FC<Props> = (props) => {
  const { LeftItem, RightItem, title } = props;
  return (
    <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
      <View style={{ flex: 1 }}>
        {LeftItem ? <SideItem {...LeftItem} position="left" /> : <></>}
      </View>
      <Text style={{ textAlign: "center",...textStyle }}>{title}</Text>
      <View style={{ flex: 1 }}>
        {RightItem ? <SideItem {...RightItem} position="right" /> : <></>}
      </View>
    </View>
  );
};

type SideItemProps = {
  onPress: () => void;
  title: string;
  position: "left" | "right";
};
const SideItem: FC<SideItemProps> = ({ onPress, title, position }) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={{ flexDirection: "column", flex: 1 }}
    >
      <View style={{ flex: 1 }} />
      <Text style={{ textAlign: position, ...textStyle }}>{title}</Text>
      <View style={{ flex: 1 }} />
    </TouchableOpacity>
  );
};