import { Field, Input, Span, Stack } from "@chakra-ui/react";
import View from "../../../components/ActionIcons/View";
import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../components/ui/dialog";
import { UserData } from "../../../Redux/Service/manage.user";

function ViewRegisterUsers({ data }: { data: UserData }) {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Span><View /></Span>
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
        w={{ base: '90%', md: '400px' }}
        height={'80vh'}
        overflow={'scroll'}
        overflowX="hidden"
        p={3} // Reduced padding
        bgSize={'md'}
      >
        <DialogHeader bg="white">
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            View Details
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                First Name
              </Field.Label>
              <Input
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                value={data?.first_name || ''}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Last Name
              </Field.Label>
              <Input
                bgColor="#EEEEEE"
                color="black"
                border="none" pl={1}
                fontSize="12px" height="30px"
                value={data?.last_name || ''}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Gender
              </Field.Label>
              <Input
                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
                value={data?.gender || ''}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                DOB
              </Field.Label>
              <Input
                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
                value={data?.date_of_birth ? new Date(data.date_of_birth).toLocaleDateString('en-GB').replace(/\//g, '-') : 'N/A'}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Mobile Number
              </Field.Label>
              <Input
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                value={data?.phone_number || ''}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Type Of User
              </Field.Label>
              <Input
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                value={data?.principal_type?.principal_type_title || 'N/A'}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Default Language
              </Field.Label>
              <Input
                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
                value={data?.principle_language_linkss?.language?.language_name || 'N/A'}
              />
            </Field.Root>
          </Stack>
        </DialogBody>

        <DialogCloseTrigger color="black" />
      </DialogContent>
    </DialogRoot>
  );
}

export default ViewRegisterUsers;
