import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame"
import { InputGroup } from "../../../components/ui/input-group";
import { LuSearch } from "react-icons/lu";
import DataTable from "../../../components/DataTable";
import { Switch } from "../../../components/ui/switch";
import img from "../../../assets/waterfall.jpg"
import Templateimg from "../../../assets/Template_img.png"
import TemplateAddModel from "./TemplateAddModel";
import EditTemplateModel from "./EditTemplateModel";



// table data

const tableHeadRow = [
  "Sr. No",
  "Title",
  "Images",
  "Action"
  
];

const managepost: any[] = [
  ...Array.from({ length: 12 }, (_, i) => ({
    "Sr. No": i + 1,
    "Title": "Lorem Ipsum",
    "Images": (
      // <Image w={50} src={img} />
      <HStack >
      <Image rounded={'lg'} w={100} h={50} src={img} />
      <Image rounded={'lg'} w={100} h={50} src={Templateimg} />
      </HStack>


    ),
    
    "Action": (
      <HStack justifyContent="center">
        <EditTemplateModel />
        <Box>
          <Switch colorPalette={'teal'} size={"xs"}/>
        </Box>
      </HStack>
    ),
  })),
];

const TemplateMaster = () => {
  return (

    <MainFrame>
      <Box>
        <HStack
          w={"100%"}
          justifyContent={"space-between"}
          mb={4}
          py={0}
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
          Template Master
          </Text>

          <HStack >
            <InputGroup 
              startElement={
                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
              }
              color={"#000"}
            >
              <Input
                p={3}
                w={300}
                bg={"#fff"}
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
                size={"xs"}
                fontSize={"sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
                ps={8}
              />
            </InputGroup>
            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
            <TemplateAddModel />
          </HStack>
        </HStack>
        <DataTable
          sortableColumns={["Name", "Registration Date "]}
          tableHeadRow={tableHeadRow}
          data={managepost}
        />
      </Box>       
    </MainFrame>
  )
}
export default TemplateMaster