import {
  Box,
  Checkbox,
  CheckboxGroup,
  Divider,
  FormControl,
  FormLabel,
  Heading,
  HStack,
  Input,
  Radio,
  RadioGroup,
  Select,
  Stack,
  Text,
  Textarea,
} from "@chakra-ui/react";
import React, { useState } from "react";
import { useParams } from "react-router-dom";
import { useGetInvestorsDetailsByIdQuery } from "../../../Services/investor.details.service";

const Kyc = () => {
  const params = useParams();
  const id = params?.id;
  const {
    data,
    isLoading: bankDetailsLoading,
    errors,
    refetch,
  } = useGetInvestorsDetailsByIdQuery(id, { skip: !id });
  // const [value, setValue] = useState('2')

  console.log(data?.data?.KYC?.questions);

  return (
    !bankDetailsLoading && (
      <Box>
        <Box mb={5}>
          {/*<Heading fontSize={"md"} fontWeight={500}>
            Additional Questions
          </Heading>
           <Text fontSize={"sm"}>
            Please provide additional Information to complete your profile.
          </Text> */}
          <Heading fontSize={"md"} fontWeight={500}>
            Address
          </Heading>
          <Divider />
          <HStack spacing={4} mb={4}>
            <FormControl>
              <FormLabel mb={1} fontSize={"sm"}>
                Address line 1
              </FormLabel>
              <Input
                bg={"#ccc3"}
                border={"none"}
                size={"sm"}
                value={data?.data?.KYC?.otherInformation?.houseOrUnit}
                type="text"
                readOnly
              />
            </FormControl>
            <FormControl>
              <FormLabel mb={1} fontSize={"sm"}>
                Address line 2
              </FormLabel>
              <Input
                bg={"#ccc3"}
                border={"none"}
                size={"sm"}
                value={data?.data?.KYC?.otherInformation?.roadOrStreet}
                type="text"
                readOnly
              />
            </FormControl>
          </HStack>
          <HStack spacing={4} mb={5}>
            <FormControl>
              <FormLabel mb={1} fontSize={"sm"}>
                Block
              </FormLabel>
              <Input
                bg={"#ccc3"}
                border={"none"}
                size={"sm"}
                value={data?.data?.KYC?.otherInformation?.block}
                type="text"
                readOnly
              />
            </FormControl>
            <FormControl>
              <FormLabel mb={1} fontSize={"sm"}>
                City
              </FormLabel>
              <Input
                bg={"#ccc3"}
                border={"none"}
                size={"sm"}
                value={data?.data?.KYC?.otherInformation?.city}
                type="text"
                readOnly
              />
            </FormControl>
          </HStack>
          <HStack spacing={4} mb={7}>
            <FormControl>
              <FormLabel mb={1} fontSize={"sm"}>
                Country
              </FormLabel>
              <Input
                bg={"#ccc3"}
                border={"none"}
                size={"sm"}
                value={data?.data?.KYC?.otherInformation?.country}
                type="text"
                readOnly
              />
            </FormControl>
            <FormControl></FormControl>
          </HStack>
          <Heading fontSize={"md"} fontWeight={500}>
            Additional Questions
          </Heading>
          <Divider />
          <HStack spacing={4} mb={4}>
            <FormControl>
              <FormLabel mb={1} fontSize={"sm"}>
                Occupation
              </FormLabel>
              <Input
                bg={"#ccc3"}
                border={"none"}
                size={"sm"}
                value={data?.data?.KYC?.otherInformation?.occupation}
                type="text"
                readOnly
              />
            </FormControl>
            <FormControl>
              <FormLabel mb={1} fontSize={"sm"}>
                Source of Funds
              </FormLabel>
              <Input
                bg={"#ccc3"}
                border={"none"}
                size={"sm"}
                value={data?.data?.KYC?.otherInformation?.sourceOfFund}
                type="text"
                readOnly
              />
            </FormControl>
          </HStack>
          {/* <HStack spacing={4}>
          <FormControl>
            <FormLabel mb={1} fontSize={"sm"}>Address</FormLabel>
            <Textarea bg={"#ccc3"} border={"none"} size={"sm"} type="textarea" resize={"none"} value={data?.data?.KYC?.otherInformation?.address} readOnly />
          </FormControl>
          <FormControl></FormControl>
        </HStack> */}
        </Box>
        <Box>
          <Heading fontSize={"md"} fontWeight={500}>
            Investor Eligibilty Notice
          </Heading>
          <Text fontSize={"sm"}>
            Please note that Tanami is currently only available to qualifield or
            accredited investors. Please confirm your status
          </Text>

          <RadioGroup>
            {data?.data?.KYC?.questions.map((question, index) => (
              <>
                <Radio
                  isChecked={question?.answers}
                  colorScheme="forestGreen"
                  key={index}
                >
                  <Text fontSize={"sm"} mb={0}>
                    {question?.question_text}
                  </Text>
                </Radio>
                <CheckboxGroup colorScheme="forestGreen">
                  <Stack ml={8}>
                    {question?.subQuestions?.map((subQuestion, index) => (
                      <Checkbox
                        isChecked={subQuestion.answers}
                        size="sm"
                        key={index}
                      >
                        <Text as="span">{subQuestion.question_text}</Text>
                      </Checkbox>
                    ))}
                  </Stack>
                </CheckboxGroup>
              </>
            ))}
          </RadioGroup>

          {/* {value === '2' && (
              <CheckboxGroup colorScheme='forestGreen'>
                <Stack ml={8}>
                    {data?.data?.KYC?.questions[1]?.subQuestions?.map((subQuestion, index) => (
                    <Checkbox isChecked={subQuestion.answers} size="sm" key={index}>
                        <Text as="span">{subQuestion.question_text}</Text>
                    </Checkbox>
                ))}
                </Stack>
              </CheckboxGroup>
            )} */}
        </Box>
      </Box>
    )
  );
};

export default Kyc;
