import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  // DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../components/ui/dialog";
import { Field, Input, Span, Stack } from "@chakra-ui/react";
// import { MdOutlineRemoveRedEye } from "react-icons/md";
// import { Button } from "../../../components/ui/button";
import View from "../../../components/ActionIcons/View";
import { Agency } from "../../../Redux/Service/agency.master.module.service";

function ViewAgencyMaster({ agency, id }: { agency: Agency[], id:number }) {

  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Span><View /></Span>
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
        // w={{ lg: "60%", md: "230px" }}
        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
          </DialogTitle>
        </DialogHeader>
        {agency.map((data) => (
          <DialogBody bg="white">
            {data.id === id && <Stack py={3}>
              <Field.Root>
                <Field.Label color="black" pt={1} fontSize="12px">
                  Agency name
                </Field.Label>
                <Input
                  value={data.name}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  disabled
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  RC No.
                </Field.Label>
                <Input
                  value={data.rc_number}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  disabled
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  State
                </Field.Label>
                <Input
                  value={data.state}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  disabled
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  RC Status
                </Field.Label>
                <Input
                  value={data.rc_status}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  disabled
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  Registered Office Address
                </Field.Label>
                <Input
                  value={data.registered_office}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  disabled
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  Website/Domain
                </Field.Label>
                <Input
                  value={data.domain_name}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  disabled
                />

                <Field.Label color="black" pt={1} fontSize="12px">
                  GST no.
                </Field.Label>
                <Input
                  value={data.gst_number}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  disabled
                />

                {/* <Field.Label color="black" pt={1} fontSize="12px">
                  Action
                </Field.Label>
                <Input
                  value={data}
                  bgColor="#EEEEEE"
                  color="black"
                  border="none"
                  pl={1}
                  fontSize="12px"
                  height="30px"
                  disabled
                /> */}
              </Field.Root>
            </Stack>}
          </DialogBody>
        ))}

        {/* <DialogFooter display="flex" justifyContent="center" pt={"2"}>
          <Button
            w="100%"
            bg="#02A0A0"
            color={"#fff"}
            fontSize="12px"
            height="30px"
          >
            Save
          </Button>
        </DialogFooter> */}

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

export default ViewAgencyMaster;