import {
  Avatar,
  Box,
  ButtonGroup,
  Editable,
  EditableInput,
  EditablePreview,
  EditableTextarea,
  Flex,
  HStack,
  Heading,
  Icon,
  IconButton,
  Input,
  Text,
  VStack,
  useEditableControls,
} from "@chakra-ui/react";
import React from "react";
import { OPACITY_ON_LOAD } from "../../Layout/animations";
import { CheckIcon, CloseIcon, EditIcon, InfoIcon } from "@chakra-ui/icons";
import { FaEarthAmericas } from "react-icons/fa6";
import logoMini from "../../assets/propic.png";

const Profile = () => {
  /* Here's a custom control */
  function EditableControls() {
    const {
      isEditing,
      getSubmitButtonProps,
      getCancelButtonProps,
      getEditButtonProps,
    } = useEditableControls();

    return (
      isEditing && (
        <ButtonGroup position={"absolute"} right={0} bottom={-8} size="sm">
          <IconButton
            boxShadow={"sm"}
            rounded={"md"}
            size={"xs"}
            icon={<CheckIcon />}
            {...getSubmitButtonProps()}
          />
          <IconButton
            boxShadow={"sm"}
            rounded={"md"}
            size={"xs"}
            icon={<CloseIcon />}
            {...getCancelButtonProps()}
          />
        </ButtonGroup>
      )
    );
  }


    // Array of fields to render
    const fields = [
      { name: "firstName", label: "First Name", defaultValue: "Faisal" },
      { name: "lastName", label: "Last Name", defaultValue: "Aljalahma" },
      { name: "email", label: "Email Address", defaultValue: "f.aljalahma@tanamicapital.com" },
      { name: "mobile", label: "Mobile Number", defaultValue: "9898767876" },
      { name: "role", label: "Role", defaultValue: "Maker" },
    ];




  return (
    <VStack
      // bg={'forestGreen.50'}
      overflowY={"scroll"}
      overflowX={"hidden"}
      height={"100vh"}
      pb={10}
      w={"100%"}
      {...OPACITY_ON_LOAD}
    >
      <VStack alignItems={"start"} w={"50%"} mt={4}>
        <Heading as="h3" size="md">
          Profile setting
        </Heading>

        <Text color={"gray.500"} fontSize="xs">
          Manage your personal information, and control which information other
          people see and apps may access.
        </Text>

        <Heading as="h3" size="sm">
          Profile photo and role
        </Heading>

        <Box
          mb={6}
          rounded={"md"}
          boxShadow={"base"}
          bg={"#fff"}
          minH={200}
          w={"100%"}
          display={"flex"}
          flexDirection={"column"}
          alignItems={"start"}
          p={8}
          pb={6}
          pe={6}
        >
          <HStack>
            <Avatar size="xl" name="Faisal Aljalahma" src={logoMini} me={4} />
            <VStack alignItems={"start"} gap={0}>
              <Text
                as={"span"}
                fontSize={"md"}
                color={"gray.700"}
                fontWeight={500}
              >
                Faisal Aljalahma
              </Text>

              <Text
                as={"span"}
                fontSize={"xs"}
                color={"gray.500"}
                fontWeight={400}
              >
                f.aljalahma@tanamicapital.com
              </Text>
            </VStack>
          </HStack>

          <HStack mt={3} w={"100%"} justifyContent={"flex-end"}>
            <VStack alignItems={"flex-start"} gap={1}>
              <Text
                display={"flex"}
                alignItems={"center"}
                gap={1}
                color={"gray.500"}
                as={"span"}
                fontSize={"11px"}
              >
                You can see your role below ? <InfoIcon />
              </Text>
              <Text
                display={"flex"}
                color={"gray.700"}
                alignItems={"center"}
                gap={2}
                as={"span"}
                fontSize={"md"}
                fontWeight={500}
              >
                {" "}
                <Icon as={FaEarthAmericas} /> Maker
              </Text>
            </VStack>
          </HStack>
        </Box>

        <Heading as="h3" size="sm">
          About you
        </Heading>

        <Box
          rounded="md"
          boxShadow="base"
          bg="#fff"
          w="100%"
          display="flex"
          flexDirection="column"
          alignItems="flex-start"
          p={6}
          gap={0}

          pb={6}
        >

{fields?.map((item) => (
  <VStack alignItems={"flex-start"} w={"100%"} gap={1.5} mb={6} key={item?.label}>
    <Text
      as={"span"}
      fontSize="xs"
      fontWeight="semibold"
      color={"gray.500"}
    >
      {item?.label}
    </Text>
    <Editable
      position={"relative"}
      gap={0}
      defaultValue={item?.defaultValue}
      w="100%"
    >
      <EditablePreview
      cursor={'pointer'}
        p={2}
        rounded={"sm"}
        w={"100%"}
        _hover={{
          bg: "gray.100",
        }}
        fontSize="sm"
        transition={"0.5s"}
      />
      <Input
      as={EditableInput}
        ps={2}
        size={'sm'}
        fontSize="sm"
        rounded={"sm"}
        _focus={{
          borderColor:"blue.500"
        }}
      />
      <EditableControls />
    </Editable>
  </VStack>
))}



        </Box>
      </VStack>
    </VStack>
  );
};

export default Profile;
