import React from "react";
import { StyleSheet, View, Text, TouchableHighlight, TouchableNativeFeedback } from "react-native";
import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions";
import { Shadow } from "react-native-shadow-2";

export default function SvgLabeledButton({
  SvgImage,
  label,
  onPress,
  style = {},
  width = 95,
  height = 95,
  isToggle = false,
  normalBgcolor = colors.white,
  toggledBgColor = colors.toggle,
}) {
  const dims = scaleDimsFromWidth(width, height, 16);
  return (
    <Shadow
      viewStyle={[{ width: 130, height: 130 }, style]}
      offset={[0, 3]}
      distance={3}
      radius={4}
      startColor="rgba(0, 0, 0, 0.15)"
      paintInside={true}
    >
      <TouchableNativeFeedback onPress={onPress}>
        <View style={styles.container}>
          <View
            style={[
              styles.innerContainer,
              {
                backgroundColor: isToggle ? toggledBgColor : normalBgcolor,
                borderColor: isToggle ? toggledBgColor : normalBgcolor,
              },
            ]}
          >
            <SvgImage {...dims} />

            <Text style={styles.label}>{label}</Text>
          </View>
        </View>
      </TouchableNativeFeedback>
    </Shadow>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: "hidden",
    borderColor: colors.primary,
    backgroundColor: colors.primary,
    borderWidth: 6,
    borderRadius: 6,
    width: 130,
    height: 130,
  },
  innerContainer: {
    overflow: "hidden",
    flex: 1,
    borderWidth: 6,
    borderRadius: 6,
    alignItems: "center",
    justifyContent: "center",
  },
  label: {
    paddingTop: 5,
    textAlign: "center",
    color: colors.primary,
    backgroundColor: "transparent",
    fontSize: 14,
    fontWeight: "bold",
  },
});