All files / libs/payout-definition/plans/components/src/lib/plan-awards/award-icon-select PlanAwardIconSelect.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { IconPencil } from '@tabler/icons-react';
import { memo, useCallback } from 'react';
import { useIntl } from 'react-intl';

import { IconButton, Popover } from '@allshares/studio-design-system';
import { useBoolState } from '@amalia/ext/react/hooks';
import { BadgeConfigurationIcon } from '@amalia/payout-definition/plans/types';

import { PlanAwardIcon } from '../award-icon/PlanAwardIcon';

import { PlanAwardIconSelectOption } from './award-icon-select-option/PlanAwardIconSelectOption';

export type PlanAwardIconSelectProps = {
  readonly value: BadgeConfigurationIcon;
  readonly onChange: (value: BadgeConfigurationIcon) => void;
  readonly disabled?: boolean;
};

export const PlanAwardIconSelect = memo(function PlanAwardIconSelect({
  value,
  onChange,
  disabled = false,
}: PlanAwardIconSelectProps) {
  const { formatMessage } = useIntl();

  const { isOpen, setOpen, setOpenFalse } = useBoolState(false, 'open');

  const handleChange: typeof onChange = useCallback(
    (...args) => {
      onChange(...args);
      setOpenFalse();
    },
    [onChange, setOpenFalse],
  );

  return (
    <div
      css={css`
        position: relative;
        width: fit-content;
        display: flex;
      `}
    >
      <PlanAwardIcon
        icon={value}
        size={56}
      />

      <Popover
        disabled={disabled}
        isOpen={isOpen}
        content={
          <Popover.Layout>
            <Popover.Header>
              <Popover.Title>{formatMessage({ defaultMessage: 'Select a badge' })}</Popover.Title>
            </Popover.Header>

            <Popover.Body>
              <div
                css={css`
                  display: grid;
                  grid-template-columns: repeat(5, 56px);
                  gap: 6px;
                `}
              >
                {Object.values(BadgeConfigurationIcon).map((icon) => (
                  <PlanAwardIconSelectOption
                    key={icon}
                    icon={icon}
                    isSelected={icon === value}
                    onClick={handleChange}
                  />
                ))}
              </div>
            </Popover.Body>
          </Popover.Layout>
        }
        onChangeIsOpen={setOpen}
      >
        <IconButton
          disabled={disabled}
          icon={<IconPencil />}
          isActive={isOpen}
          label={formatMessage({ defaultMessage: 'Pick another badge' })}
          outline="shadow"
          size="small"
          css={css`
            position: absolute;
            right: -8px;
            bottom: -4px;
          `}
        />
      </Popover>
    </div>
  );
});