import React, { useState, useEffect } from 'react'
import useAuth from 'app/hooks/useAuth'
import { Link, Navigate, useParams } from 'react-router-dom'
import { useNavigate, useLocation } from 'react-router-dom'
import { MatxLoading, SimpleCard } from 'app/components'
import { styled } from '@mui/system'
import { Button } from '@mui/material'

const Container = styled('div')(({ theme }) => ({
    margin: '30px',
    [theme.breakpoints.down('sm')]: {
        margin: '16px',
    },
    '& .breadcrumb': {
        marginBottom: '30px',
        [theme.breakpoints.down('sm')]: {
            marginBottom: '16px',
        },
    },
}))

function BusinessDetail(props) {
    const { id } = useParams()
    const navigate = useNavigate()
    const location = useLocation()
    console.log('LOCATIONS:', location)
    const [page, setPage] = useState(0)
    const [count, setCount] = useState(1)
    const [data, setData] = useState(location.state.data)
    const [isLoading, setIsLoading] = useState(false)
    const [openDialogue, setOpenDialogue] = React.useState(false)
    const [deleteId, setDeleteId] = React.useState('')

    if (isLoading) {
        return <MatxLoading />
    }

    return (
        <Container>
            <Button
                variant="outlined"
                onClick={() => {
                    console.log('LOCAION:', location)
                    navigate(location.state.prevPath)
                }}
            >
                Go Back
            </Button>
            {data.business && (
                <SimpleCard title={``}>
                    <SimpleCard>
                        <p>
                            Business Name: <b>{data.business.businessName}</b>
                        </p>
                        <p>
                            Business Email: <b>{data.business.email}</b>
                        </p>
                        <p>
                            Business Phone Number:{' '}
                            <b>{data.business.phoneNumber}</b>
                        </p>
                        <p>
                            Business Address:{' '}
                            <b>{data.business.businessAddress}</b>
                        </p>
                        <p>
                            Business Description:{' '}
                            <b>{data.business.businessDescription}</b>
                        </p>
                        <p>
                            Business Old: <b>{data.business.businessOld}</b>
                        </p>
                    </SimpleCard>
                </SimpleCard>
            )}
        </Container>
    )
}
export default BusinessDetail
