// MUI Imports
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import Chip from '@mui/material/Chip'
import Divider from '@mui/material/Divider'
import Button from '@mui/material/Button'
import type { ButtonProps } from '@mui/material/Button'

// Type Imports
import type { ThemeColor } from '@core/types'

// Component Imports
import EditUserInfo from '@components/dialogs/edit-user-info'
import ConfirmationDialog from '@components/dialogs/confirmation-dialog'
import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'
import CustomAvatar from '@core/components/mui/Avatar'

// Vars
const userData = {
  firstName: 'Wadi Adika Adrian',
  lastName: 'Firgantoro',
  userName: '@wadiAdika',
  perusahaan: 'Yayasan Pertiwi Tb',
  email: 'labuh87@napitupu',
  status: 'active',
  role: 'Vendor',
  telepon: '622301190560',
  alamatPenagihan: 'Gg. Sentot Alibasa 381, Cimahi 66726 Sulbar',
  akunHutang: '2-20100 Hutang U',
  akunPiutang: '',
  kenaPajak: 'Kena Pajak'
}

const VendorDetails = () => {
  // Vars
  const buttonProps = (children: string, color: ThemeColor, variant: ButtonProps['variant']): ButtonProps => ({
    children,
    color,
    variant
  })

  return (
    <>
      <Card>
        <CardContent className='flex flex-col pbs-12 gap-6'>
          <div className='flex flex-col gap-6'>
            <div className='flex items-center justify-center flex-col gap-4'>
              <div className='flex flex-col items-center gap-4'>
                <CustomAvatar alt='user-profile' src='/images/avatars/1.png' variant='rounded' size={120} />
                <Typography variant='h5'>{`${userData.firstName} ${userData.lastName}`}</Typography>
              </div>
              <Chip label='Vendor' color='primary' size='small' variant='tonal' />
            </div>
          </div>

          {/* Detail Kontak Section */}
          <div>
            <Typography variant='h5'>Detail Kontak</Typography>
            <Divider className='mlb-4' />
            <div className='flex flex-col gap-2'>
              <div className='flex items-center flex-wrap gap-x-1.5'>
                <Typography className='font-medium' color='text.primary'>
                  Nama:
                </Typography>
                <Typography>{`${userData.firstName} ${userData.lastName}`}</Typography>
              </div>
              <div className='flex items-center flex-wrap gap-x-1.5'>
                <Typography className='font-medium' color='text.primary'>
                  Perusahaan:
                </Typography>
                <Typography>{userData.perusahaan}</Typography>
              </div>
              <div className='flex items-center flex-wrap gap-x-1.5'>
                <Typography className='font-medium' color='text.primary'>
                  Email:
                </Typography>
                <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
                  {userData.email}
                </Typography>
              </div>
              <div className='flex items-center flex-wrap gap-x-1.5'>
                <Typography className='font-medium' color='text.primary'>
                  Telepon:
                </Typography>
                <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
                  {userData.telepon}
                </Typography>
              </div>
              <div className='flex items-center flex-wrap gap-x-1.5'>
                <Typography className='font-medium' color='text.primary'>
                  Alamat Penagihan:
                </Typography>
                <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
                  {userData.alamatPenagihan}
                </Typography>
              </div>
            </div>
          </div>

          {/* Pemetaan Akun Section */}
          <div>
            <Typography variant='h5'>Pemetaan Akun</Typography>
            <Divider className='mlb-4' />
            <div className='flex flex-col gap-2'>
              <div className='flex items-center flex-wrap gap-x-1.5'>
                <Typography className='font-medium' color='text.primary'>
                  Akun Hutang:
                </Typography>
                <Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
                  {userData.akunHutang}
                </Typography>
              </div>
              <div className='flex items-center flex-wrap gap-x-1.5'>
                <Typography className='font-medium' color='text.primary'>
                  Akun Piutang:
                </Typography>
                <Typography color='text.secondary'>{userData.akunPiutang || '-'}</Typography>
              </div>
              <div className='flex items-center flex-wrap gap-x-1.5'>
                <Typography className='font-medium' color='text.primary'>
                  Kena Pajak:
                </Typography>
                <Typography color='text.primary'>{userData.kenaPajak}</Typography>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </>
  )
}

export default VendorDetails
