pledge

import { Button, Container, Flex, Input, Radio, RadioGroup, Select, Text, VStack, useToast } from '@chakra-ui/react'
import { Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/table'
import React, { useEffect, useState } from 'react'
import radioStyles from '../../assets/css/inputRadioStyles.module.css'
import { getSessionStorageLoginID } from '../../Services/sessionStorage'
import { pledgeCDSLFn } from '../../Services/getdatafromapi'
import { useNavigate } from 'react-router-dom'
import { numberFormat } from '../../Services/formatter'

const PledgeTable = ({ data,clientCode='' }) => {
    const toast = useToast()
    const [pledgeType, setpledgeType] = useState('MP')
    const [inputValue, setinputValue] = useState(data.map((item,index)=>{return 0}))
    const [amount, setAmount] = useState(0);
    const [allClientRadio, setAllClientRadio] = useState('CM');
    const [redirectionLink, setredirectionLink] = useState(null)
    const [clientdata, setData] = useState(data);
    const [errorMessage,setErrorMessage]=useState("")
    const handleOnSubmit= async()=>{
        let tempData = []
        clientdata.map((clientdataItem,index)=>{
            if(clientdataItem.new_pledge>0){
                tempData.push({isin:clientdataItem.ISIN,Price:clientdataItem.Price, newPledgeQty: clientdataItem.new_pledge,script_code:clientdataItem.ScripCode})
            }
        })
        if(tempData.length == 0){
            toast({
                title: 'Missing Pledge Quantity',
                description: "Please enter pledge quantity to continue.",
                status: 'error',
                duration: 1500,
                isClosable: true,
                position:'top'
              })
            return
        }
        let payload = {
            client_code: clientCode == ''?getSessionStorageLoginID():clientCode,
            data: tempData,
            segment: pledgeType == 'MP'?allClientRadio:'',
            pledgeType:pledgeType
        }
        let res = await pledgeCDSLFn("CDSLPledge", payload);
        if (res.status == 200) {
            setredirectionLink(res.data)
        }
        else{
            setErrorMessage(res.message)
        }
    }
    data?.map((item)=>{
        item.inputValue = 0
        item.new_pledge = 0
    })
    
   
    const handleInputChange = (id, value,index) => {
        const inputValueData = [...inputValue];
  inputValueData[index] = parseInt(value)
  setinputValue(inputValueData)

        const updatedData = clientdata.map(updateDataItem => {
            if (updateDataItem.ISIN == id) {
                const maxPledgeQty = Math.min(parseInt(value), updateDataItem.Qty);
              return { ...updateDataItem,new_pledge:value != '' ? maxPledgeQty:0, inputValue: value != '' ? (updateDataItem.Price - (updateDataItem.Haircut/100) * updateDataItem.Price) * parseInt(value):0 };
            }
            return updateDataItem;
          });
          setData(updatedData);
    };
    const totalCalculate = () =>{
        const totalQty = clientdata.reduce((accumulator, item) => {
            return accumulator + (item.inputValue);
        }, 0);
        setAmount(totalQty)
    }
    useEffect(()=>{
        totalCalculate()
    },[clientdata])

    useEffect(() => {
        if(redirectionLink != null){
            const openLinkInNewTab = () => {
              const url = redirectionLink;
              const target = '_blank';
              window.open(url, target);
            };
            openLinkInNewTab();
        }
      }, [redirectionLink]);
    return (
        <VStack w={'100%'}>
            <a href={redirectionLink} target="_blank" rel="noopener noreferrer" style={{display:'none'}}></a>
            <Container maxW='100%'>
                <Flex mb={'1rem'} justifyContent={'space-between'} alignItems={'center'}>
                <Flex gap={'1rem'}>
                    <Select defaultValue={'MP'} onChange={(e)=>setpledgeType(e.target.value)}>
                    <option value='MP'>Margin</option>
                    <option value='MF'>MTF</option>
                    </Select>
                    {pledgeType == 'MP' && <RadioGroup onChange={setAllClientRadio} value={allClientRadio}>
                        <Flex gap={'1rem'}>
                            <label htmlFor="allClientsRadio" className={radioStyles.radioBtn}>
                                <Radio id='allClientsRadio' value='CM' >CM</Radio>
                            </label>
                            <label htmlFor="groupRadio" className={radioStyles.radioBtn}>
                                <Radio id='groupRadio' value='FO' >F&O</Radio>
                            </label>
                        </Flex>
                    </RadioGroup>}
                    </Flex>
                    <Text>Amount : ₹ {numberFormat(amount)}</Text>
                    <Button bg={'var(--vz-primary)'} color={'var(--vz-white)'} _hover={{ bg: 'var(--vz-primary-dark)' }} size='md' onClick={handleOnSubmit}>Continue</Button>
                </Flex>
            </Container>
            <Container maxW='100%'>
                <TableContainer overflowY={'scroll'} maxH={'28vw'} w='full'>
                    <Table variant='striped' size='sm'>
                        <Thead>
                            <Tr>
                                <Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>ScripCode</Th>
                                <Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>ScriptName</Th>
                                <Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>ISIN</Th>
                                <Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Total Qty</Th>
                                <Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Pledge Qty</Th>
                                <Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>New Pledge</Th>
                                <Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Price</Th>
                                <Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Haircut</Th>
                                <Th p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>Net Value</Th>
                            </Tr>
                        </Thead>
                        <Tbody>
                            {clientdata?.length > 0 && clientdata?.map((item, i) => (
                                <Tr key={i}>
                                    <Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["ScripCode"]}</Td>
                                    <Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["ScripName"]}</Td>
                                    <Td fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["ISIN"]}</Td>
                                    <Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["Qty"]}</Td>
                                    <Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{item["AlreadyPledge"]}</Td>
                                    <Td p={'1rem'} fontSize={{ base: '0.9rem', '2xl': '0.7vw' }}>
                                        <Input bg={'white'}
                                         disabled={item.Qty == 0} value={inputValue[i]} type='number' placeholder='Enter Pledge Quantity' 
                                         onChange={(e) => {
                                             if((parseInt(e.target.value)<0) || (parseInt(e.target.value) > parseInt(item.Qty))){
                                               return
                                            }else{

                                            }
                                            handleInputChange(item.ISIN, e.target.value,i)
                                        }}
                                         ></Input>
                                        </Td>
                                    <Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(item["Price"])}</Td>
                                    <Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(item["Haircut"])}</Td>
                                    <Td textAlign={'right'} fontSize={{ base: 'md', '2xl': '0.8vw' }}>{numberFormat(item.inputValue)}</Td>
                                </Tr>
                            ))}
                        </Tbody>
                    </Table>
                </TableContainer>
            </Container>
        </VStack>
    )
}

export default PledgeTable