import './style.css'

import Box from '@mui/material/Box'
import FormControl from '@mui/material/FormControl'
import MenuItem from '@mui/material/MenuItem'
import Select from '@mui/material/Select'
import _get from 'lodash/get'
import React from 'react'

import { defineIsSalesClosed, getTicketSelectOptions } from './utils'

interface ITicketRowProps {
  ticketTier: any;
  prevTicketTier: any;
  selectedTickets: any;
  handleTicketSelect: any;
  event: any;
  isSeatMapAllowed?: boolean;
  tableType?: boolean;
}

export const TicketRow = ({
  ticketTier,
  prevTicketTier,
  selectedTickets,
  handleTicketSelect,
  event,
  isSeatMapAllowed,
  tableType,
}: ITicketRowProps) => {
  const soldOutMessage = ticketTier.soldOutMessage
    ? `${ticketTier.soldOutMessage}`.toUpperCase()
    : 'SOLD OUT'
  const isSalesClosed = defineIsSalesClosed({
    salesStarted: ticketTier.salesStarted,
    salesEnded: ticketTier.salesEnded,
    presalesStarted: event?.presalesStarted,
    presalesEnded: event?.presalesEnded,
    presalesEnabled: event?.presales_enabled,
  })
  const maxCount = tableType ? ticketTier.maxGuests : ticketTier.maxQuantity
  const minCount = tableType ? ticketTier.minGuests : ticketTier.minQuantity
  const { multiplier } = ticketTier
  const options = getTicketSelectOptions(maxCount, minCount, multiplier)

  const ticketsClosedMessage = !ticketTier.salesStarted
    ? 'Sales not started'
    : 'Sales Ended'
  const canPurchaseTicket = ticketTier.displayTicket && ticketTier.maxQuantity
  const isDirectPurchaseAllowed = _get(ticketTier, 'allowDirectPurchase', false)

  const onSaleContent = (
    <div className="get-tickets">
      {ticketTier.isTable && <span>GUESTS</span>}
      <Box className="get-tickets__selectbox">
        <FormControl fullWidth>
          <Select
            sx={{ borderRadius: 0 }}
            value={selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0}
            onChange={handleTicketSelect}
            displayEmpty
            inputProps={{ 'aria-label': 'Without label' }}
            MenuProps={{
              PaperProps: {
                sx: { maxHeight: 150 },
                className: 'get-tickets-paper',
              },
            }}
          >
            {options.map((option, index) => (
              <MenuItem key={index} value={option.value}>
                {option.value}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </Box>
    </div>
  )

  let returnValue: any = ''

  // ticketTier.soldOut === false --> means that ticket is in the stock
  const isSoldOut =
    ticketTier.sold_out ||
    !(ticketTier.displayTicket || ticketTier.slotGroupId) ||
    ticketTier.soldOut ||
    ticketTier.soldOut === false

  if (isSoldOut) {
    returnValue = soldOutMessage
  } else if (isSalesClosed) {
    returnValue = ticketsClosedMessage
  } else if (canPurchaseTicket && isSeatMapAllowed && !isDirectPurchaseAllowed) {
    // Seat Map Tickets renderer logic
    returnValue = null
  } else if (
    canPurchaseTicket ||
    (canPurchaseTicket && event?.presalesStarted && !event?.presalesEnded)
  ) {
    returnValue = onSaleContent
  } else if (_get(prevTicketTier, 'in_stock')) {
    returnValue = 'SOON'
  }

  return <>{returnValue} </>
}