import { View, Text, Button, TouchableOpacity } from "react-native-ui-lib";
import React, { useState } from "react";
import { MaterialIcons } from "@expo/vector-icons";
import { StyleSheet } from "react-native";

interface ICalendarViewProps {
  viewSwitch: (value: boolean) => void;
}
const CalendarViewSwitch = (calendarViewProps: ICalendarViewProps) => {
  const [calView, setCalView] = useState<boolean>(false);

  return (
    <View
      row
      spread
      style={{
        position: "absolute",
        bottom: 20,
        left: 20,
        borderRadius: 30,
        backgroundColor: "white",
        alignItems: "center",
        justifyContent: "center",
        // iOS shadow
        shadowColor: "#000",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        // Android shadow (elevation)
        elevation: 6,
      }}
      centerV
    >
      <TouchableOpacity
        onPress={() => {
          setCalView(true);
          calendarViewProps.viewSwitch(true);
        }}
      >
        <View
          centerV
          centerH
          height={40}
          paddingH-15
          style={calView ? styles.switchBtnActive : styles.switchBtn}
        >
          <Text color={calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
            Family View
          </Text>
        </View>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          setCalView(false);
          calendarViewProps.viewSwitch(false);
        }}
      >
        <View
          centerV
          centerH
          height={40}
          paddingH-15
          style={!calView ? styles.switchBtnActive : styles.switchBtn}
        >
          <Text color={!calView ? "white" : "#a1a1a1"} style={styles.switchTxt}>
            My View
          </Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

export default CalendarViewSwitch;

const styles = StyleSheet.create({
  switchBtnActive: {
    backgroundColor: "#a1a1a1",
    borderRadius: 50,
  },
  switchBtn: {
    backgroundColor: "white",
    borderRadius: 50,
  },
  switchTxt:{
    fontSize: 16,
    fontFamily: 'Manrope_600SemiBold'
  }
});