// MUI Imports
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'

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

// Component Imports
import CustomAvatar from '../../../../../@core/components/mui/Avatar'
import { Order } from '../../../../../types/services/order'
import { formatCurrency } from '../../../../../utils/transform'

type PayementStatusType = {
  text: string
  color: ThemeColor
  colorClassName: string
}

const statusChipColor: { [key: string]: PayementStatusType } = {
  pending: {
    color: 'warning',
    text: 'Pending',
    colorClassName: 'text-warning'
  },
  completed: {
    color: 'success',
    text: 'Paid',
    colorClassName: 'text-success'
  },
  cancelled: {
    color: 'error',
    text: 'Cancelled',
    colorClassName: 'text-error'
  }
}

const BillingAddress = ({ data }: { data: Order }) => {
  return (
    <Card>
      <CardContent className='flex flex-col gap-6'>
        <div className='flex flex-col gap-2'>
          <div className='flex justify-between items-center'>
            <Typography variant='h5'>
              Payment Details ({data?.payments?.length ?? 0} {data?.payments?.length === 1 ? 'Payment' : 'Payments'})
            </Typography>
          </div>
        </div>
        {data?.payments?.length ? data.payments.map((payment, index) => (
          <div key={index}>
            <div className='flex items-center gap-3'>
              <CustomAvatar skin='light' color='secondary' size={40}>
                <i className='tabler-credit-card' />
              </CustomAvatar>
              <div className='flex flex-col'>
                <div className='font-medium flex items-center gap-3'>
                  <Typography color='text.primary'>{payment.payment_method_name}</Typography>
                  <div className='flex items-center gap-1'>
                    <i
                      className={classnames(
                        'tabler-circle-filled bs-1.5 is-1.5',
                        statusChipColor[payment.status].colorClassName
                      )}
                    />
                    <Typography color={`${statusChipColor[payment.status].color}.main`} className='font-medium text-xs'>
                      {statusChipColor[payment.status].text}
                    </Typography>
                  </div>
                </div>
                <Typography color='text.secondary' className='font-medium'>
                  {formatCurrency(payment.amount)}
                </Typography>
              </div>
            </div>
          </div>
        )) : (
          <Typography variant='body2' className='text-secondary'>No payments found</Typography>
        )}
      </CardContent>
    </Card>
  )
}

export default BillingAddress
