import { Badge, Box, Button, FormControl, FormHelperText, FormLabel, HStack, Text } from '@chakra-ui/react'
import React, { useState } from 'react'
import { OPACITY_ON_LOAD } from '../../Layout/animations'
import NormalTable from '../../Components/DataTable/NormalTable';
import { useGetUnbanInvestorQuery } from '../../Services/ban.investor.service';
import { formatDate, generateSerialNumber } from '../../Constants/Constants';
import { TABLE_PAGINATION } from '../../Constants/Paginations';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // Importing the Quill snow theme



const EmailNotification = () => {
    const [isLoading, setIsLoading] = useState(false);
    const [ selectedRadio, setSelectedRadio] = useState([])
    const [value, setValue] = useState('');

    const {
        data : investorDetails,
        isLoading: investorDetailsLoading,
        refetch,
      } = useGetUnbanInvestorQuery();

      
  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Sr N/O",
    "Date",
    "Client ID",
    "First Name",
    "Last Name",
    "Country",
    "Phone Number",
    "E-mail ID",
    "KYC Status",
  ];



  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);


  const extractedArray = investorDetails?.data?.rows?.map((item, idx) => ({
    id: item?.principal_xid,
    "Sr N/O": (
      <Text
        justifyContent={"left"}
        as={"span"}
        color={"gray.600"}
        className="d-flex align-items-center fw-bold web-text-small"
      >
       {generateSerialNumber(idx,currentPage, pageSize )}
      </Text>
    ),
    Date: (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {formatDate(item?.date)}
        </Text>
      </Box>
    ),
    "Client ID": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.clientReference_id}
        </Text>
      </Box>
    ),
    "First Name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.firstName}
        </Text>
      </Box>
    ),
    "Last Name": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.lastName}
        </Text>
      </Box>
    ),
    Country: (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.country}
        </Text>
      </Box>
    ),
    "Phone Number": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.phoneNumber}
        </Text>
      </Box>
    ),
    "E-mail ID": (
      <Box w={"auto"} isTruncated={true}>
        <Text as={"span"} color={"teal.900"}>
          {item?.emailAddress}
        </Text>
      </Box>
    ),
    "KYC Status": (
      <Box w={"auto"} isTruncated={true}>
        <Badge
          fontWeight={"500"}
          textTransform={"none"}
          color={item?.KYCStatus === false ? "red" : "blue"}
          px={2}
          py={0.5}
          variant={'ghost'}
        >
          {item?.KYCStatus === true ? "Completed" : "Incompleted"}
        </Badge>
      </Box>
    ),
  }));


  console.log(value);


  const modules = {
    toolbar: [
      [{ 'header': '1'}, { 'header': '2'}, { 'font': [] }],
      [{size: []}],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}],
    //   ['link', 'image', 'video'],
      ['clean'] 
    ],
  };
  return (
    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={14} >


{/* <Box py={4}> */}

<FormControl  mb={6}>
    <HStack py={4} pb={3} w={'100%'} justifyContent={'space-between'} alignItems={'center'}>
  <Text as={'span'} fontSize={'sm'}>Customize your email</Text>
  <Button rounded={'xs'} size={'sm'}>Preview</Button>
  </HStack>
  <ReactQuill 

        theme="snow"
        value={value}
        onChange={setValue}
        modules={modules}
        placeholder="Start typing here..."

  style={{ 
    // height: '400px', 
    // borderRadius: '8px', 
    // border: '1px solid #ddd', 
    // padding: '10px', 
    // backgroundColor: '#f9f9f9' ,
    
  }}
      />
      <FormHelperText fontSize={'xs'}>We'll never share your email.</FormHelperText>
</FormControl>

      
      {/* <Box mt={4}>
        <strong>Output:</strong>
        <Box border="1px solid #ddd" p={2} mt={2} dangerouslySetInnerHTML={{ __html: value }} />
      </Box> */}
    {/* </Box> */}


      <NormalTable
        centered={true}
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        // isLoading={isLoading}
        setSelectedRadio={setSelectedRadio}
        selectedRadio={selectedRadio}
        showRadioButton={true}
      />
    </Box>
  )
}

export default EmailNotification