import React, { useState, useEffect } from 'react'
import { withStyles } from '@material-ui/core/styles'
import { Button, Tooltip } from '@material-ui/core'
import Dialog from '@material-ui/core/Dialog'
import MuiDialogTitle from '@material-ui/core/DialogTitle'
import MuiDialogContent from '@material-ui/core/DialogContent'
import MuiDialogActions from '@material-ui/core/DialogActions'
import IconButton from '@material-ui/core/IconButton'
import CloseIcon from '@material-ui/icons/Close'
import Typography from '@material-ui/core/Typography'
import CustomerList from './Index'
import { stubFalse } from 'lodash'

const styles = (theme) => ({
    root: {
        margin: 0,
        padding: theme.spacing(2),
    },
    closeButton: {
        position: 'absolute',
        right: theme.spacing(1),
        top: theme.spacing(1),
        color: theme.palette.grey[500],
    },
})

const DialogTitle = withStyles(styles)((props) => {
    const { children, classes, onClose } = props
    return (
        <MuiDialogTitle disableTypography className={classes.root}>
            <Typography variant="h6">{children}</Typography>
            {onClose ? (
                <IconButton
                    aria-label="Close"
                    className={classes.closeButton}
                    onClick={onClose}
                >
                    <CloseIcon />
                </IconButton>
            ) : null}
        </MuiDialogTitle>
    )
})

const DialogContent = withStyles((theme) => ({
    root: {
        padding: theme.spacing(2),
    },
}))(MuiDialogContent)

const DialogActions = withStyles((theme) => ({
    root: {
        margin: 0,
        padding: theme.spacing(1),
    },
}))(MuiDialogActions)

const CustomizedDialogs = (props) => {
    const {
        onSelectCustomer,
        cusomterSelect,
        idPaymentPartner,
        onAddTrans,
        id,
    } = props
    const [open, setOpen] = useState(false)

    const handleClickOpen = () => {
        setOpen(true)
    }

    const handleClose = () => {
        setOpen(false)
        // onSelectCustomer(null)
    }
    const customSelect = (item) => {
        onSelectCustomer(item)
        setOpen(false)
    }
    console.log('idPaymentPartner dialog', idPaymentPartner)

    return (
        <div style={{ marginRight: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <Button
                    onClick={handleClickOpen}
                    style={{
                        padding: 7,
                        width: 160,
                        marginLeft: 20,
                    }}
                    color="primary"
                    variant="contained"
                >
                    Chọn giao dịch
                </Button>
            </div>

            <Dialog
                fullWidth
                maxWidth="xl"
                onClose={handleClose}
                aria-labelledby="customized-dialog-title"
                open={open}
            >
                <DialogTitle onClose={handleClose}>
                    Chọn giao dịch đối soát
                </DialogTitle>
                <DialogContent dividers>
                    <CustomerList
                        customSelect={customSelect}
                        handleClose={handleClose}
                        idPaymentPartner={idPaymentPartner}
                        open={open}
                        onAddTrans={(list) => {
                            console.log('run')
                            onAddTrans(list)
                            handleClose()
                        }}
                        id={id}
                    />
                </DialogContent>
            </Dialog>
        </div>
    )
}

export default CustomizedDialogs
