import {
  SearchBar,
  SearchBarActionArea,
  SearchBarButton,
  SearchBarDesktop,
  SearchBarLocationTrigger,
  SearchBarRoot,
  SearchBarSearchButton,
} from '@wandercom/design-system-web/ui/search-bar';

export function Example() {
  return (
    <SearchBarRoot
      desktop={
        <SearchBarDesktop>
          <SearchBarLocationTrigger>Where</SearchBarLocationTrigger>
          <SearchBarButton>Anytime</SearchBarButton>
          <SearchBarActionArea>
            <SearchBarButton>Any guests</SearchBarButton>
            <SearchBarSearchButton />
          </SearchBarActionArea>
        </SearchBarDesktop>
      }
    />
  );
}

import {
  SearchBarPopover,
  SearchBarPopoverContent,
  SearchBarPopoverInput,
  SearchBarPopoverItem,
  SearchBarPopoverSection,
  SearchBarPopoverTrigger,
  SearchBarLocationTrigger,
} from '@wandercom/design-system-web/ui/search-bar';
import { useState } from 'react';

export function LocationPopover() {
  const [open, setOpen] = useState(false);

  return (
    <SearchBarPopover open={open} onOpenChange={setOpen}>
      <SearchBarPopoverTrigger asChild>
        <SearchBarLocationTrigger active={open}>Where</SearchBarLocationTrigger>
      </SearchBarPopoverTrigger>
      <SearchBarPopoverContent>
        <SearchBarPopoverInput placeholder="Search locations..." />
        <SearchBarPopoverSection label="Recent searches">
          <SearchBarPopoverItem
            title="Los Angeles"
            subtitle="Los Angeles, California"
          />
          <SearchBarPopoverItem
            title="Joshua Tree"
            subtitle="California, United States"
          />
        </SearchBarPopoverSection>
      </SearchBarPopoverContent>
    </SearchBarPopover>
  );
}

import {
  SearchBarButton,
  SearchBarDatePopoverCalendar,
  SearchBarDatePopoverContent,
  SearchBarDatePopoverDuration,
  SearchBarDatePopoverFlexibility,
  SearchBarDatePopoverHeader,
  SearchBarDatePopoverMonthGrid,
  SearchBarPopover,
  SearchBarPopoverTrigger,
  type SearchBarDateDuration,
  type SearchBarDateMonth,
} from '@wandercom/design-system-web/ui/search-bar';
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';

export function DatePopover() {
  const [open, setOpen] = useState(false);
  const [mode, setMode] = useState<'dates' | 'flexible'>('dates');
  const [dateRange, setDateRange] = useState<DateRange | undefined>();
  const [flexibility, setFlexibility] = useState<'exact' | '1' | '2' | '3' | '7'>('exact');
  const [duration, setDuration] = useState<SearchBarDateDuration>('weekend');
  const [selectedMonths, setSelectedMonths] = useState<SearchBarDateMonth[]>([]);

  return (
    <SearchBarPopover open={open} onOpenChange={setOpen}>
      <SearchBarPopoverTrigger asChild>
        <SearchBarButton>Anytime</SearchBarButton>
      </SearchBarPopoverTrigger>
      <SearchBarDatePopoverContent>
        <SearchBarDatePopoverHeader
          mode={mode}
          onModeChange={setMode}
          onClear={() => {
            setDateRange(undefined);
            setSelectedMonths([]);
          }}
        />
        {mode === 'dates' && (
          <>
            <SearchBarDatePopoverCalendar
              selected={dateRange}
              onSelect={setDateRange}
              disabled={{ before: new Date() }}
            />
            <SearchBarDatePopoverFlexibility
              value={flexibility}
              onValueChange={setFlexibility}
              disabled={!dateRange?.from || !dateRange?.to}
            />
          </>
        )}
        {mode === 'flexible' && (
          <div className="flex flex-col gap-6 px-7 py-7">
            <SearchBarDatePopoverDuration value={duration} onValueChange={setDuration} />
            <SearchBarDatePopoverMonthGrid selected={selectedMonths} onSelect={setSelectedMonths} />
          </div>
        )}
      </SearchBarDatePopoverContent>
    </SearchBarPopover>
  );
}

import {
  SearchBarButton,
  SearchBarGuestsPopoverContent,
  SearchBarGuestsPopoverRow,
  SearchBarPopover,
  SearchBarPopoverTrigger,
} from '@wandercom/design-system-web/ui/search-bar';
import { useState } from 'react';

export function GuestsPopover() {
  const [open, setOpen] = useState(false);
  const [guests, setGuests] = useState(1);
  const [pets, setPets] = useState(0);

  return (
    <SearchBarPopover open={open} onOpenChange={setOpen}>
      <SearchBarPopoverTrigger asChild>
        <SearchBarButton>Any guests</SearchBarButton>
      </SearchBarPopoverTrigger>
      <SearchBarGuestsPopoverContent>
        <SearchBarGuestsPopoverRow
          label="Guests"
          value={guests}
          onChange={setGuests}
          min={1}
          max={16}
        />
        <SearchBarGuestsPopoverRow
          label="Pets"
          value={pets}
          onChange={setPets}
          max={10}
        />
      </SearchBarGuestsPopoverContent>
    </SearchBarPopover>
  );
}