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

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

// Component Imports
import ConfirmationDialog from '@components/dialogs/confirmation-dialog'
import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'
import { Order } from '../../../../../types/services/order'
import { formatDate } from '../../../../../utils/transform'

type PayementStatusType = {
  text: string
  color: ThemeColor
}

type StatusChipColorType = {
  color: ThemeColor
}

export const paymentStatus: { [key: number]: PayementStatusType } = {
  1: { text: 'paid', color: 'success' },
  2: { text: 'pending', color: 'warning' },
  3: { text: 'cancelled', color: 'secondary' },
  4: { text: 'failed', color: 'error' }
}

export const statusChipColor: { [key: string]: StatusChipColorType } = {
  'pending': { color: 'warning' },
  'completed': { color: 'success' },
  'partial': { color: 'secondary' },
  'cancelled': { color: 'error' }
}

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

  return (
    <div className='flex flex-wrap justify-between sm:items-center max-sm:flex-col gap-y-4'>
      <div className='flex flex-col items-start gap-1'>
        <div className='flex items-center gap-2'>
          <Typography variant='h5'>{`Order #${orderData?.order_number}`}</Typography>
          <Chip
            variant='tonal'
            label={orderData?.status}
            color={statusChipColor[orderData?.status || ''].color}
            size='small'
          />
          <Chip
            variant='tonal'
            label={orderData?.payment_status || ''}
            color={statusChipColor[orderData?.payment_status || ''].color}
            size='small'
          />
        </div>
        <Typography>{`${formatDate(orderData!.created_at)}`}</Typography>
      </div>
      <OpenDialogOnElementClick
        element={Button}
        elementProps={buttonProps('Delete Order', 'error', 'tonal')}
        dialog={ConfirmationDialog}
        dialogProps={{ type: 'delete-order' }}
      />
    </div>
  )
}

export default OrderDetailHeader
