export default function TimePicker()

in src/components/Chat/ChatTranscriptor/ChatMessages/InteractiveMessages/TimePicker.js [168:269]
58 lines of code
7 McCabe index (conditional complexity)

export default function TimePicker({ content, addMessage }) {
  const { title, subtitle, timezoneOffset, timeslots } = content;
 
  const timeslotsGroupedByDate = getTimeslotsGroupedByDate(timeslots);
  const availableDates = Object.keys(timeslotsGroupedByDate);
 
  const [datePageIndex, setDatePageIndex] = useState(0);
  const selectedDate = availableDates[datePageIndex];
  const timeslotsForSelectedDate = timeslotsGroupedByDate[selectedDate];
 
  const [selectedTimeslot, setSelectedTimeslot] = useState(null);
  const [timeslotPageIndex, setTimeslotPageIndex] = useState(0);
  const timeslotStartIndex = timeslotPageIndex * NUM_TIMESLOTS_PER_PAGE;
  const timeslotNextPageStartIndex = timeslotStartIndex + NUM_TIMESLOTS_PER_PAGE;
  const visibleTimeslotsForSelectedDate = timeslotsForSelectedDate.slice(timeslotStartIndex, Math.min(timeslotsForSelectedDate.length, timeslotNextPageStartIndex));
 
  function showEarlierDate() {
    changeDate(datePageIndex - 1);
  }
 
  function showLaterDate() {
    changeDate(datePageIndex + 1);
  }
 
  function changeDate(pageIndex) {
    setDatePageIndex(pageIndex);
    setTimeslotPageIndex(0);
    setSelectedTimeslot(null);
  }
 
  function showEarlierTimeslots() {
    setTimeslotPageIndex(timeslotPageIndex - 1);
  }
 
  function showLaterTimeslots() {
    setTimeslotPageIndex(timeslotPageIndex + 1);
  }
 
  function onTimeslotSelect(e) {
    setSelectedTimeslot(e.currentTarget.value);
  }
 
  function resetSelection(){
    setSelectedTimeslot(null);
  }
 
  function confirmSelection() {
    addMessage({ text: selectedTimeslot });
  }
 
  function renderTimeslot(timeslot) {
    const selected = new Date(selectedTimeslot).getTime() === new Date(timeslot.date).getTime();
    return <TimeslotButton selected={selected} key={`timeslot${timeslot.date}`} timeslot={timeslot} timezoneOffset={timezoneOffset} onKeypress={onTimeslotSelect} onClick={onTimeslotSelect}/>;
  }
 
  const dateString = new Date(selectedDate).toLocaleDateString(getLocale(),
    {
      weekday: "long",
      month: "long",
      day: "numeric",
    });
  const showDateControls = availableDates.length > 0;
  const showTimeslotPaginationButtons = selectedTimeslot == null && timeslotsForSelectedDate.length > NUM_TIMESLOTS_PER_PAGE;
 
  return (
    <>
      <TextSection>
        <Title>{title}</Title>
        {subtitle && <Subtitle>{subtitle}</Subtitle>}
      </TextSection>
      <ResponsesSection>
        <DatePicker>
          {showDateControls &&
          <DatePicker.PrevDateButton disabled={datePageIndex === 0} onKeyPress={showEarlierDate} onClick={showEarlierDate} data-testid={`time-picker-prev-date-button`}>
            <Chevron direction={"left"}/>
          </DatePicker.PrevDateButton>}
          <span>{dateString}</span>
          {showDateControls &&
          <DatePicker.NextDateButton disabled={datePageIndex === availableDates.length - 1} onClick={showLaterDate} data-testid={`time-picker-next-date-button`}>
            <Chevron direction={"right"}/>
          </DatePicker.NextDateButton>}
        </DatePicker>
        <TimeslotsList>
          {visibleTimeslotsForSelectedDate.map(renderTimeslot)}
        </TimeslotsList>
        <TimeslotControls>
          {selectedTimeslot != null &&
          <>
            <ResetSelectionButton onClick={resetSelection} data-testid={`time-picker-reset-selection-button`}>
              <svg viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                <path d="M13 1.3L11.7 0 6.5 5.2 1.3 0 0 1.3l5.2 5.2L0 11.7 1.3 13l5.2-5.2 5.2 5.2 1.3-1.3-5.2-5.2z" fillRule="evenodd"/>
              </svg>
            </ResetSelectionButton>
            <ConfirmSelectionButton disabled={selectedTimeslot == null} onClick={confirmSelection} data-testid={`time-picker-confirm-selection-button`}>Confirm</ConfirmSelectionButton>
          </>}
            {showTimeslotPaginationButtons &&
            <>
            <PrevTimeslotsButton disabled={timeslotPageIndex === 0}
                                 onClick={showEarlierTimeslots}>Earlier</PrevTimeslotsButton>
            <NextTimeslotsButton disabled={timeslotNextPageStartIndex >= timeslotsForSelectedDate.length}
                  onClick={showLaterTimeslots}>Later</NextTimeslotsButton>
            </>}