// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: MIT-0 import { Checkbox, Grid, Icon, Select } from "@awsui/components-react"; import React, { FC, useEffect } from "react"; import selections from "./Selections"; import "./HoursOfOperationSelectorComponent.css"; interface HoursOfOperationSelectorComponentProps { setHoursOfOperation: (value: {}) => void; } const HoursOfOperationSelectorComponent: FC = (props) => { const [hours, setHours] = React.useState({}); const [mondayChecked, setMondayChecked] = React.useState(false); const [selectedMondayFromHoursOption, setSelectedMondayFromHoursOption] = React.useState({ value: "00", }); const [selectedMondayFromMinutesOption, setSelectedMondayFromMinutesOption] = React.useState({ value: "00", }); const [selectedMondayToHoursOption, setSelectedMondayToHoursOption] = React.useState({ value: "00", }); const [selectedMondayToMinutesOption, setSelectedMondayToMinutesOption] = React.useState({ value: "00", }); const [tuesdayChecked, setTuesdayChecked] = React.useState(false); const [selectedTuesdayFromHoursOption, setSelectedTuesdayFromHoursOption] = React.useState({ value: "00", }); const [selectedTuesdayFromMinutesOption, setSelectedTuesdayFromMinutesOption] = React.useState({ value: "00", }); const [selectedTuesdayToHoursOption, setSelectedTuesdayToHoursOption] = React.useState({ value: "00", }); const [selectedTuesdayToMinutesOption, setSelectedTuesdayToMinutesOption] = React.useState({ value: "00", }); const [wednesdayChecked, setWednesdayChecked] = React.useState(false); const [selectedWednesdayFromHoursOption, setSelectedWednesdayFromHoursOption] = React.useState({ value: "00", }); const [selectedWednesdayFromMinutesOption, setSelectedWednesdayFromMinutesOption] = React.useState({ value: "00", }); const [selectedWednesdayToHoursOption, setSelectedWednesdayToHoursOption] = React.useState({ value: "00", }); const [selectedWednesdayToMinutesOption, setSelectedWednesdayToMinutesOption] = React.useState({ value: "00", }); const [thursdayChecked, setThursdayChecked] = React.useState(false); const [selectedThursdayFromHoursOption, setSelectedThursdayFromHoursOption] = React.useState({ value: "00", }); const [selectedThursdayFromMinutesOption, setSelectedThursdayFromMinutesOption] = React.useState({ value: "00", }); const [selectedThursdayToHoursOption, setSelectedThursdayToHoursOption] = React.useState({ value: "00", }); const [selectedThursdayToMinutesOption, setSelectedThursdayToMinutesOption] = React.useState({ value: "00", }); const [fridayChecked, setFridayChecked] = React.useState(false); const [selectedFridayFromHoursOption, setSelectedFridayFromHoursOption] = React.useState({ value: "00", }); const [selectedFridayFromMinutesOption, setSelectedFridayFromMinutesOption] = React.useState({ value: "00", }); const [selectedFridayToHoursOption, setSelectedFridayToHoursOption] = React.useState({ value: "00", }); const [selectedFridayToMinutesOption, setSelectedFridayToMinutesOption] = React.useState({ value: "00", }); const [saturdayChecked, setSaturdayChecked] = React.useState(false); const [selectedSaturdayFromHoursOption, setSelectedSaturdayFromHoursOption] = React.useState({ value: "00", }); const [selectedSaturdayFromMinutesOption, setSelectedSaturdayFromMinutesOption] = React.useState({ value: "00", }); const [selectedSaturdayToHoursOption, setSelectedSaturdayToHoursOption] = React.useState({ value: "00", }); const [selectedSaturdayToMinutesOption, setSelectedSaturdayToMinutesOption] = React.useState({ value: "00", }); const [sundayChecked, setSundayChecked] = React.useState(false); const [selectedSundayFromHoursOption, setSelectedSundayFromHoursOption] = React.useState({ value: "00", }); const [selectedSundayFromMinutesOption, setSelectedSundayFromMinutesOption] = React.useState({ value: "00", }); const [selectedSundayToHoursOption, setSelectedSundayToHoursOption] = React.useState({ value: "00", }); const [selectedSundayToMinutesOption, setSelectedSundayToMinutesOption] = React.useState({ value: "00", }); const setHoursOfOperation = (day: string, type: string, value: {}) => { switch (day) { case "monday": if (type === "from-hours") { setSelectedMondayFromHoursOption(value); } else if (type === "from-minutes") { setSelectedMondayFromMinutesOption(value); } else if (type === "to-hours") { setSelectedMondayToHoursOption(value); } else if (type === "to-minutes") { setSelectedMondayToMinutesOption(value); } break; case "tuesday": if (type === "from-hours") { setSelectedTuesdayFromHoursOption(value); } else if (type === "from-minutes") { setSelectedTuesdayFromMinutesOption(value); } else if (type === "to-hours") { setSelectedTuesdayToHoursOption(value); } else if (type === "to-minutes") { setSelectedTuesdayToMinutesOption(value); } break; case "wednesday": if (type === "from-hours") { setSelectedWednesdayFromHoursOption(value); } else if (type === "from-minutes") { setSelectedWednesdayFromMinutesOption(value); } else if (type === "to-hours") { setSelectedWednesdayToHoursOption(value); } else if (type === "to-minutes") { setSelectedWednesdayToMinutesOption(value); } break; case "thursday": if (type === "from-hours") { setSelectedThursdayFromHoursOption(value); } else if (type === "from-minutes") { setSelectedThursdayFromMinutesOption(value); } else if (type === "to-hours") { setSelectedThursdayToHoursOption(value); } else if (type === "to-minutes") { setSelectedThursdayToMinutesOption(value); } break; case "friday": if (type === "from-hours") { setSelectedFridayFromHoursOption(value); } else if (type === "from-minutes") { setSelectedFridayFromMinutesOption(value); } else if (type === "to-hours") { setSelectedFridayToHoursOption(value); } else if (type === "to-minutes") { setSelectedFridayToMinutesOption(value); } break; case "saturday": if (type === "from-hours") { setSelectedSaturdayFromHoursOption(value); } else if (type === "from-minutes") { setSelectedSaturdayFromMinutesOption(value); } else if (type === "to-hours") { setSelectedSaturdayToHoursOption(value); } else if (type === "to-minutes") { setSelectedSaturdayToMinutesOption(value); } break; case "sunday": if (type === "from-hours") { setSelectedSundayFromHoursOption(value); } else if (type === "from-minutes") { setSelectedSundayFromMinutesOption(value); } else if (type === "to-hours") { setSelectedSundayToHoursOption(value); } else if (type === "to-minutes") { setSelectedSundayToMinutesOption(value); } break; } }; const updateHours = () => { let hours = { monday: !mondayChecked ? {} : { fromHours: selectedMondayFromHoursOption.value, fromMinutes: selectedMondayFromMinutesOption.value, toHours: selectedMondayToHoursOption.value, toMinutes: selectedMondayToMinutesOption.value }, tuesday: !tuesdayChecked ? {} : { fromHours: selectedTuesdayFromHoursOption.value, fromMinutes: selectedTuesdayFromMinutesOption.value, toHours: selectedTuesdayToHoursOption.value, toMinutes: selectedTuesdayToMinutesOption.value }, wednesday: !wednesdayChecked ? {} : { fromHours: selectedWednesdayFromHoursOption.value, fromMinutes: selectedWednesdayFromMinutesOption.value, toHours: selectedWednesdayToHoursOption.value, toMinutes: selectedWednesdayToMinutesOption.value }, thursday: !thursdayChecked ? {} : { fromHours: selectedThursdayFromHoursOption.value, fromMinutes: selectedThursdayFromMinutesOption.value, toHours: selectedThursdayToHoursOption.value, toMinutes: selectedThursdayToMinutesOption.value }, friday: !fridayChecked ? {} : { fromHours: selectedFridayFromHoursOption.value, fromMinutes: selectedFridayFromMinutesOption.value, toHours: selectedFridayToHoursOption.value, toMinutes: selectedFridayToMinutesOption.value }, saturday: !saturdayChecked ? {} : { fromHours: selectedSaturdayFromHoursOption.value, fromMinutes: selectedSaturdayFromMinutesOption.value, toHours: selectedSaturdayToHoursOption.value, toMinutes: selectedSaturdayToMinutesOption.value }, sunday: !sundayChecked ? {} : { fromHours: selectedSundayFromHoursOption.value, fromMinutes: selectedSundayFromMinutesOption.value, toHours: selectedSundayToHoursOption.value, toMinutes: selectedSundayToMinutesOption.value }, } props.setHoursOfOperation(hours); } useEffect(() => { updateHours(); }, [selectedMondayFromHoursOption, selectedMondayFromMinutesOption, selectedMondayToHoursOption, selectedMondayToMinutesOption, selectedTuesdayFromHoursOption, selectedTuesdayFromMinutesOption, selectedTuesdayToHoursOption, selectedTuesdayToMinutesOption, selectedWednesdayFromHoursOption, selectedWednesdayFromMinutesOption, selectedWednesdayToHoursOption, selectedWednesdayToMinutesOption, selectedThursdayFromHoursOption, selectedThursdayFromMinutesOption, selectedThursdayToHoursOption, selectedThursdayToMinutesOption, selectedFridayFromHoursOption, selectedFridayFromMinutesOption, selectedFridayToHoursOption, selectedFridayToMinutesOption, selectedSaturdayFromHoursOption, selectedSaturdayFromMinutesOption, selectedSaturdayToHoursOption, selectedSaturdayToMinutesOption, selectedSundayFromHoursOption, selectedSundayFromMinutesOption, selectedSundayToHoursOption, selectedSundayToMinutesOption]); return (
{ setMondayChecked(detail.checked); }} checked={mondayChecked} > Monday

From:

setHoursOfOperation("monday", "from-minutes", detail.selectedOption)} options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!mondayChecked} />

To:

setHoursOfOperation("monday", "to-minutes", detail.selectedOption)} options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!mondayChecked} />
{ mondayChecked ? ( ) : ( ) }
{ setTuesdayChecked(detail.checked); }} checked={tuesdayChecked} > Tuesday

From:

setHoursOfOperation("tuesday", "from-minutes", detail.selectedOption)} options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!tuesdayChecked} />

To:

setHoursOfOperation("tuesday", "to-minutes", detail.selectedOption)} options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!tuesdayChecked} />
{ tuesdayChecked ? ( ) : ( ) }
{ setWednesdayChecked(detail.checked); }} checked={wednesdayChecked} > Wednesday

From:

setHoursOfOperation("wednesday", "from-minutes", detail.selectedOption) } options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!wednesdayChecked} />

To:

setHoursOfOperation("wednesday", "to-minutes", detail.selectedOption)} options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!wednesdayChecked} />
{ wednesdayChecked ? ( ) : ( ) }
{ setThursdayChecked(detail.checked); }} checked={thursdayChecked} > Thursday

From:

setHoursOfOperation("thursday", "from-minutes", detail.selectedOption) } options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!thursdayChecked} />

To:

setHoursOfOperation("thursday", "to-minutes", detail.selectedOption)} options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!thursdayChecked} />
{ thursdayChecked ? ( ) : ( ) }
{ setFridayChecked(detail.checked); }} checked={fridayChecked} > Friday

From:

setHoursOfOperation("friday", "from-minutes", detail.selectedOption) } options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!fridayChecked} />

To:

setHoursOfOperation("friday", "to-minutes", detail.selectedOption)} options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!fridayChecked} />
{ fridayChecked ? ( ) : ( ) }
{ setSaturdayChecked(detail.checked); }} checked={saturdayChecked} > Saturday

From:

setHoursOfOperation("saturday", "from-minutes", detail.selectedOption) } options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!saturdayChecked} />

To:

setHoursOfOperation("saturday", "to-minutes", detail.selectedOption)} options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!saturdayChecked} />
{ saturdayChecked ? ( ) : ( ) }
{ setSundayChecked(detail.checked); }} checked={sundayChecked} > Sunday

From:

setHoursOfOperation("sunday", "from-minutes", detail.selectedOption) } options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!sundayChecked} />

To:

setHoursOfOperation("sunday", "to-minutes", detail.selectedOption)} options={selections.minutesOptions} selectedAriaLabel="Selected" disabled={!sundayChecked} />
{ sundayChecked ? ( ) : ( ) }
); }; export default HoursOfOperationSelectorComponent;