import {
  Box,
  HStack,
  Icon,
  Text,
  VStack,
  useColorMode,
  useRadio,
  useRadioGroup,
} from "@chakra-ui/react";
import { FiChevronsRight } from "react-icons/fi";
import { TbArrowBadgeRightFilled } from "react-icons/tb";

function ChartsTabs({ selectedValue, setSelectedValue, days }) {

  const { colorMode } = useColorMode();
  // This function represents the RadioCard part
  function RadioCard(props) {
    const { getInputProps, getRadioProps } = useRadio(props);

    const input = getInputProps();
    const checkbox = getRadioProps();

    return (
      <Box as="label" >
        <input {...input} />
        <Box
          {...checkbox}
          cursor="pointer"
          // borderWidth="1px"
          borderRadius="md"
          // boxShadow="md"
          fontSize={{ base: "xs", md: "xs" }}
          _checked={{
            bg: colorMode === "light" ? "#DEDBEB" : "#fff",
            color: "#000",
            borderColor: "#4023A6",
          }}
          _focus={{
            boxShadow: "outline",
          }}
          fontWeight={500}
          py={{base:"3px",md: 1 }}
          px={{base:"6px",md: 2 }}
        >
          {props.children}
        </Box>
      </Box>
    );
  }

  // Setting defaultValue to '24 DayusHrs'
  const options = ["24 Hrs", `30 Days`, "12 Months"];

  const { getRootProps, getRadioProps } = useRadioGroup({
    name: "framework",
    defaultValue: "12 Months", // Default tab is set to '24 Hrs'
    onChange: (value) => setSelectedValue(value),
  });

  const group = getRootProps();

  return (
    <HStack alignItems={"center"} gap={1} ml={{base:2,md:0}}>
      <Text
        fontWeight={600}
        display={"flex"}
        alignItems={"center"}
        fontSize={{ base: "xs", md: "xs" }}
        color={colorMode === 'light'?'gray.400':"#fff"}       
      >
        Last 
        <Icon
          as={FiChevronsRight}
          ms={1}
          color={colorMode === "light" ? "gray.400" : "#fff"}
        />
      </Text>
      <HStack
        bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
        p={{base : 1,md : 1.5}}
        rounded={"8px"}
        justifyContent={{ base: "flex-end" }}
        gap={{ base: 0, md: 1 }}
        {...group}
        ps={2}
      >
        {options.map((value) => {
          const radio = getRadioProps({ value });
          return (
            <RadioCard key={value} {...radio}>
              {value}
            </RadioCard>
          );
        })}
      </HStack>



    </HStack>
  );
}

export default ChartsTabs;
