import React from "react";
import { StyleSheet, Text, View, Image, TouchableOpacity } from "react-native";
import Colors from "../common/Colors";
import { translate } from "../common/localize/i18n";
const arrowRight = require("../common/Image/tick.png");

const SquareRadio = ({
  data,
  style,
  selectedvalue,
  numberOfRecord,
  selected,
  labelStyle,
  rightArrow,
  isSelector,
  selectorLabel,
  onSelectorPress,
  isFullValue,
  maxWidth,
  gap,
  disabled,
  isDisplayName,
  noTranslation,
}) => {
  //TO CALCULATE THE RIGHT MARGIN
  //THIS IS REQUIRED BECAUSE WE DONT HAVE `GAP` PROPERTY SUPPORTED IN REACT NATIVE
  const calculateMarginRight = (index) => {
    if (index === data.length - 1) {
      if (isSelector) return false;
      else return true;
    }
    if ((index + 1) % numberOfRecord === 0) {
      return true;
    } else return false;
  };

  //CALCULATE THE WIDTH OF EACH ITEM DEPENDS OF NUMBER OF ITEMS IN ROW
  const calculateWidth = () => {
    switch (numberOfRecord) {
      case 1:
        return "100%";
      case 2:
        return "40%";
      case 3:
        return "25%";
      default:
        return "100%";
    }
  };

  //TO CALCULATE TOP MARGIN,  TOP MARGIN WHEN THERE ARE TWO OR MORE ROWS
  const calculateMarginTop = (index) => {
    if (index < numberOfRecord) return 0;
    else return 16;
  };

  return (
    <View style={[styles.container, style]}>
      {data.map((item, index) => {
        return (
          <TouchableOpacity
            key={item.id}
            disabled={disabled || item.disabled}
            onPress={() => selected(isFullValue ? item : item.id)}
            style={{
              marginRight: calculateMarginRight(index) ? 0 : gap || 33,
              flex: 1,
              minWidth: calculateWidth(),
              maxWidth: maxWidth ? "45%" : null,
              // maxWidth: calculateWidth()
            }}
          >
            <View
              style={[
                styles.button,
                {
                  borderColor:
                    selectedvalue === item.id ? Colors.digitYellow : "#DDDDDD",
                  marginTop: calculateMarginTop(index),
                  borderWidth: selectedvalue === item.id ? 2 : 1,
                  backgroundColor:
                    disabled || item.disabled ? "#f5f5f5" : Colors.white,
                },
              ]}
            >
              {item.icon ? (
                <Image source={item.icon} style={styles.icon} />
              ) : null}
              <View
                style={[
                  { flexDirection: "row", alignItems: "center" },
                  rightArrow ? { paddingHorizontal: 10 } : null,
                ]}
              >
                <Text
                  style={[
                    styles.text,
                    {
                      color: item.icon ? Colors.borderBlack : Colors.darkBlack,
                      fontSize: item.icon ? 12 : 14,
                      textAlign: "center",
                    },
                    labelStyle,
                  ]}
                >
                  {!!isDisplayName
                    ? translate(item.displayName)
                    : noTranslation
                    ? item.name
                    : translate(item.name.split(".").join(""))}
                </Text>
                {rightArrow ? (
                  <View style={styles.imageView}>
                    <Image source={arrowRight} style={styles.imageStyle} />
                  </View>
                ) : null}
              </View>
            </View>
          </TouchableOpacity>
        );
      })}
      {isSelector ? (
        <TouchableOpacity
          key={"Selector"}
          onPress={onSelectorPress}
          disabled={disabled}
          style={{
            marginRight: 0,
            flex: 1,
            minWidth: calculateWidth(),
          }}
        >
          <View
            style={[
              styles.button,
              styles.labelTop,
              { borderWidth: 1 },
              rightArrow ? { paddingHorizontal: 10 } : null,
            ]}
          >
            <Text style={[styles.selectorLabelText, labelStyle]}>
              {translate(selectorLabel)}
            </Text>
            {rightArrow ? (
              <View style={styles.imageView}>
                <Image source={arrowRight} style={styles.imageStyle} />
              </View>
            ) : null}
          </View>
        </TouchableOpacity>
      ) : null}
    </View>
  );
};

export default SquareRadio;

const styles = StyleSheet.create({
  container: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-between",
    flexWrap: "wrap",
    alignContent: "flex-start",
  },
  icon: {
    width: 20,
    height: 20,
    marginBottom: 6,
  },
  button: {
    paddingVertical: 11,
    alignItems: "center",
    borderRadius: 4,
    shadowColor: Colors.lightGray,
    shadowOffset: {
      width: 1,
      height: 1,
    },
    shadowOpacity: 1,
    shadowRadius: 4.65,

    // elevation: 1,
  },
  text: {
    fontFamily: "Muli-Regular",
  },
  imageStyle: {
    marginRight: 5,
    width: 4,
    height: 8,
  },
  imageView: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "flex-end",
  },
  selectorLabelText: {
    fontFamily: "Muli-Regular",
    color: Colors.darkBlack,
    fontSize: 14,
  },
  labelTop: {
    borderColor: "#707070",
    marginTop: 16,
    flexDirection: "row",
    alignItems: "center",
  },
});
