import { Button } from "../../components/ui/button"
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
import { createListCollection, Field, Input, SelectValueText, Stack, } from "@chakra-ui/react"

import { FaRegEdit } from "react-icons/fa"
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
import { MdOutlineRemoveRedEye } from "react-icons/md"

const frameworks = createListCollection({
    items: [
        { label: "React.js", value: "react" },
        { label: "Vue.js", value: "vue" },
        { label: "Angular", value: "angular" },
        { label: "Svelte", value: "svelte" },
    ],
})
function ViewManageJob() {
    return (


        <DialogRoot placement="center">
            <DialogTrigger asChild>
                <Button bg={"transparent"} size="sm">
                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
                </Button>
            </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">Add Details</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
                    <Stack py={3}>
                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
                            <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root><Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
                            <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root><Field.Root>
                            <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
                            <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root><Field.Root>
                            <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
                            <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root><Field.Root>
                            <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
                            <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root><Field.Root>
                            <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
                            <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root><Field.Root>
                            <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
                            <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root>
                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                            <Input placeholder="Enter the Country Selection"   /> */}
                        <SelectRoot collection={frameworks} size="sm" w={'100%'}>
                            <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
                            <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
                                borderRadius={"5px"}>
                                <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
                            </SelectTrigger>
                            <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
                                {frameworks.items.map((movie) => (
                                    <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
                                        fontSize="12px" >
                                        {movie.label}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </SelectRoot>

                        <Field.Root>
                            <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
                            <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root><Field.Root>
                            <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
                            <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root><Field.Root>
                            <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
                            <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </Field.Root><Field.Root>
                            <Field.Label pt={1} color="black" fontSize="12px">Upload Image</Field.Label>
                            <Input placeholder="Upload Image" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
                        </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 ViewManageJob