Popover

() => {
  const emptyFilter = { status: [], changed: 'any' };
  const [applied, setApplied] = React.useState(emptyFilter);
  const [draft, setDraft] = React.useState(emptyFilter);
  const [open, setOpen] = React.useState(false);

  const statuses = [
    { value: 'draft', label: 'Kladd' },
    { value: 'published', label: 'Publisert' },
    { value: 'archived', label: 'Arkivert' },
  ];

  const activeCount =
    applied.status.length + (applied.changed !== 'any' ? 1 : 0);

  const toggleStatus = value =>
    setDraft(prev => ({
      ...prev,
      status: prev.status.includes(value)
        ? prev.status.filter(status => status !== value)
        : [...prev.status, value],
    }));

  return (
    <Popover showPopover={open} setShowPopover={setOpen}>
      <PopoverTrigger>
        <SecondaryButton
          onClick={() => {
            setDraft(applied);
            setOpen(prev => !prev);
          }}
        >
          <AdjustmentsIcon aria-hidden="true" />
          {activeCount > 0 ? `Filter (${activeCount})` : 'Filter'}
        </SecondaryButton>
      </PopoverTrigger>
      <PopoverContent>
        <form
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '1.5rem',
            padding: '1.5rem',
            minWidth: '18rem',
          }}
          onSubmit={event => {
            event.preventDefault();
            setApplied(draft);
            setOpen(false);
          }}
        >
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              gap: '1rem',
            }}
          >
            <Heading4 as="h2" margin="none">
              Filtrer
            </Heading4>
            <PopoverCloseButton>
              <IconButton aria-label="Lukk filter">
                <CloseIcon aria-hidden="true" />
              </IconButton>
            </PopoverCloseButton>
          </div>

          <Fieldset label="Status">
            {statuses.map(status => (
              <Checkbox
                key={status.value}
                checked={draft.status.includes(status.value)}
                onChange={() => toggleStatus(status.value)}
              >
                {status.label}
              </Checkbox>
            ))}
          </Fieldset>

          <RadioGroup
            name="changed"
            label="Sist endret"
            value={draft.changed}
            onChange={event =>
              setDraft(prev => ({ ...prev, changed: event.target.value }))
            }
          >
            <Radio value="any">Når som helst</Radio>
            <Radio value="7d">Siste 7 dager</Radio>
            <Radio value="30d">Siste 30 dager</Radio>
          </RadioGroup>

          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              gap: '1rem',
            }}
          >
            <SecondaryButton type="button" onClick={() => setDraft(emptyFilter)}>
              Nullstill
            </SecondaryButton>
            <PrimaryButton type="submit">Bruk filter</PrimaryButton>
          </div>
        </form>
      </PopoverContent>
    </Popover>
  );
}