import { HStack, Select } from "native-base"
import * as React from "react"
import { Text } from "../"

export type Day = {
  label: string
  start: string
  end: string
}

export interface AddStoreHoursPickerProps {
  /**
   * An optional style override useful for padding & margin.
   */
  days: Day[]
  id: string
  onStartChange: (dayLabel: string, value: string) => any
  onEndChange: (dayLabel: string, value: string) => any
}

export const TIME_OPTIONS = [
  "12 AM",
  "1 AM",
  "2 AM",
  "3 AM",
  "4 AM",
  "5 AM",
  "6 AM",
  "7 AM",
  "8 AM",
  "9 AM",
  "10 AM",
  "11 AM",
  "12 PM",
  "1 PM",
  "2 PM",
  "3 PM",
  "4 PM",
  "5 PM",
  "6 PM",
  "7 PM",
  "8 PM",
  "9 PM",
  "10 PM",
  "11 PM",
]

export const AddStoreHoursPicker = (props: AddStoreHoursPickerProps) => {
  const { onEndChange, onStartChange, id, days } = props

  const weeklySortedDays = React.useMemo(() => {
    return days.sort((a, b) => {
      const dayOrder = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      return dayOrder.indexOf(a.label) - dayOrder.indexOf(b.label)
    })
  }, [days])
  return (
    <>
      {weeklySortedDays.map((day) => {
        return (
          <HStack key={day.label} w={"100%"} px={3} alignItems="center">
            <Text w="20%">{day.label}</Text>
            <Select
              flex={1}
              selectedValue={day.start}
              onValueChange={(v) => {
                onStartChange(day.label, v)
              }}
            >
              {TIME_OPTIONS.map((time) => (
                <Select.Item label={time} value={time} key={`${day}-${time}`} />
              ))}
            </Select>
            <Select
              flex={1}
              selectedValue={day.end}
              onValueChange={(v) => {
                onEndChange(day.label, v)
              }}
            >
              {TIME_OPTIONS.map((time) => (
                <Select.Item label={time} value={time} key={`${day}-${time}`} />
              ))}
            </Select>
          </HStack>
        )
      })}
    </>
  )
}