import React, { useState } from "react";
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Button,
  Box,
  Text,
  Image,
  HStack,
} from "@chakra-ui/react";

import { AddIcon, DragHandleIcon } from "@chakra-ui/icons";
import DataTable from "../../../Components/DataTable/DataTable";

const SetDisplayOrder = ({data,}) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  
  const tableHeadRow = ["", "Title", "Icon", ];


  const [ extractedArray, setExtractedArray] = useState(data?.map((item, index) => ({
    id:item?.id,
    "": (
        <Box w={"20px"} isTruncated={true}>
        <DragHandleIcon />
        </Box>
    ),
    Title: (
        <Box w={"300px"} isTruncated={true}>
      <Text
        justifyContent={"left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {item?.meritsHeader}
      </Text></Box>
    ),
    Icon: (
      item.iconFilePath && <Image
      rounded={'md'}
      bg={"#003B14"}
      display={'flex'}
      p={1}
      justifyContent={'center'}
      alignItems={'center'}
        src={" https://admin.tanami.betadelivery.com/"+item.iconFilePath}
        w={8}
        h={8}
      />
      

   
      // https://admin.tanami.betadelivery.com/public/icons/linkedin.png
    ),
  })))









  return (
    <>
      <Button
        leftIcon={<AddIcon />}
        size={"sm"}
        fontSize={"xs"}
        rounded={"sm"}
        variant={"outline"}
        colorScheme="forestGreen"
        onClick={onOpen}
      >
        Set Display Order
      </Button>

      <Modal isCentered size={'xl'} isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent >
          <ModalHeader fontSize={"lg"}>Set Display Order</ModalHeader>
          <ModalCloseButton />
          <ModalBody>


            
      <DataTable
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        setData={setExtractedArray}
        isDraggable={true}
        // isLoading={false}
        // viewActionId={actionId}
        // setViewActionId={setActionId}
        // totalPages={10}

        // setMouseEnteredId={setMouseEnteredId}
        // setMouseEntered={setMouseEntered}
      />
            







          </ModalBody>

          <ModalFooter>
            <Button
              size={"sm"}
              fontSize={"xs"}
              rounded={"sm"}
              variant={"outline"}
              colorScheme="forestGreen"
              mr={3}
              onClick={onClose}
            >
              Reset order
            </Button>
            <Button
              size={"sm"}
              fontSize={"xs"}
              rounded={"sm"}
              colorScheme="forestGreen"
              variant="solid"
            >
              Set order
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

export default SetDisplayOrder;