import { Grid, Typography, Divider, Button } from '@material-ui/core'
import { useTranslation } from 'react-i18next'
import CustomTable from '../../../Common/CustomTable/CustomTable'
import { getCommonAddressColumns } from './CommonAddress.columns'
import AddIcon from '@material-ui/icons/Add';
import { useCallback, useEffect, useState } from 'react';
import CreateAddressDialog from '../../../Dialogs/CreateAddressDialog/CreateAddressDialog';
import { IAddress } from '../../../../../../Application/DTOs/AddressDto/AddressDto.types';
import { useDispatch, useSelector } from 'react-redux';
import { Address } from '../../../../Api/Address/Address';
import { toast } from 'react-toastify';
import { setLoader } from '../../../../Redux/Loader/actions';
import { USER_ROLES } from '../../../../Types/Constants';
import { AppState } from '../../../../Redux';
import { GridRowParams } from '@material-ui/data-grid';

const addressApi = new Address()

const {
    ADMIN_USER
} = USER_ROLES

//This is not used anymore. please refer to Address management now
function CommonAddress() {
    const [t] = useTranslation('CommonAddress')
    const dispatch = useDispatch()
    const [isAddNewAddressDialogOpen, setIsAddNewAddressDialogOpen] = useState(false)
    const [addresses, setAddresses] = useState<IAddress[]>([])
    const user = useSelector((state: AppState) => state.user)
    const isUserAdmin = user.response?.type === ADMIN_USER
    const [selectedAddress, setSelectedAddress] = useState<IAddress | undefined>(undefined)


    const getAddresses = useCallback(
        () => {
            dispatch(setLoader(true))
            addressApi.all(undefined, true, isUserAdmin ? user.response?.country ?? null : null, undefined, undefined, undefined, true)
                .then((response) => {
                    const addresses = response.data as IAddress[]
                    setAddresses(addresses)
                    dispatch(setLoader(false))
                })
                .catch((err :any) => {
                    console.log('err', err)
                    toast.error(t('error_getting_addresses'))
                    dispatch(setLoader(false))
                })
        },
        [dispatch, t, isUserAdmin, user.response?.country],
    )

    const handleOnAddNewAddressDialogClose = useCallback(
        () => {
            setIsAddNewAddressDialogOpen(false)
            setSelectedAddress(undefined)
            getAddresses()
        },
        [getAddresses],
    )

    const handleOnAddNewAddressClick = useCallback(
        () => {
            setIsAddNewAddressDialogOpen(true)
            setSelectedAddress(undefined)
        },
        [],
    )

    const handleOnAddAddressDone = useCallback(
        () => {
            handleOnAddNewAddressDialogClose()
        },
        [handleOnAddNewAddressDialogClose],
    )

    useEffect(() => {
        getAddresses()
        
    }, [getAddresses])

    const onRowClick = useCallback(
        (row:GridRowParams) => {
            setSelectedAddress(row.row as IAddress)
            setIsAddNewAddressDialogOpen(true)
        },
        [],
    )

    const onUpdateStatusCallback = useCallback(
        (addressId: string | number, newStatus: boolean) => {
            dispatch(setLoader(true))
            addressApi.updateStatus(addressId, newStatus)
                .then(() => {
                    dispatch(setLoader(false))

                    getAddresses()
                })
                .catch((err :any) => {
                    console.log('err', err)
                    toast.error(t('error_updating_address_status'))
                    dispatch(setLoader(false))
                })
        },
        [dispatch, t, getAddresses],
    )

    const onDelete = useCallback(
        (addressId: string | number) => {
            dispatch(setLoader(true))
            addressApi.delete(addressId)
                .then(() => {
                    dispatch(setLoader(false))

                    getAddresses()
                })
                .catch((err :any) => {
                    console.log('err', err)
                    toast.error(t('error_deleting_address'))
                    dispatch(setLoader(false))
                })
        },
        [dispatch, t, getAddresses],
    )


    const columns = getCommonAddressColumns(t, onUpdateStatusCallback, onDelete)

    return (
        <>
            <CreateAddressDialog address={selectedAddress} onDone={handleOnAddAddressDone} isCommon={true} open={isAddNewAddressDialogOpen} handleClose={handleOnAddNewAddressDialogClose}/>
            <Grid
                container
                direction="column"
                justifyContent="space-between"
                alignItems="stretch"
                spacing={5}
            >
                <Grid item>
                    <Typography>
                        {t('common_address')}
                    </Typography>
                </Grid>
               
                <Grid item>
                    <Grid
                        container
                        spacing={2}
                    >
                        <Grid item md={2}>
                            <Button onClick={handleOnAddNewAddressClick} startIcon={<AddIcon />} variant="contained" fullWidth color="primary">
                                {t('add_new_address')}
                            </Button>
                        </Grid>
                        <Grid item md={10}>
                            {/* GAP */}
                        </Grid>
                        <Grid item md={12}>
                            <CustomTable
                                rows={addresses}
                                columns={columns}
                                onRowClick={onRowClick}
                            />
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </>
    )
}

export default CommonAddress