All files / libs/payout-definition/plans/components/src/lib/token-visibility TokenVisibilityIconButton.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { css } from '@emotion/react';
import { IconEye, IconEyeClosed } from '@tabler/icons-react';
import { memo, type MouseEvent } from 'react';
import { useIntl } from 'react-intl';
import { match } from 'ts-pattern';

import { IconButton, type IconButtonSize } from '@allshares/studio-design-system';
import { TokenType } from '@amalia/amalia-lang/tokens/types';
import { HidableElementVisibility } from '@amalia/payout-definition/plans/types';

const DisplayStatusToIcon = {
  [HidableElementVisibility.AVAILABLE]: <IconEyeClosed />,
  [HidableElementVisibility.ON_DISPLAY]: <IconEye />,
};

type TokenVisibilityIconButtonProps = {
  readonly 'data-testid'?: string;
  readonly displayStatus: HidableElementVisibility;
  readonly isIconAlwaysDisplayed?: boolean;
  readonly onUpdateDisplayStatus: (event: MouseEvent) => Promise<void> | void;
  readonly tokenType?: TokenType;
  readonly iconSize?: `${IconButtonSize}`;
  readonly isForecastView: boolean;
};

const hiddenStyle = css`
  visibility: hidden;
`;

export const TokenVisibilityIconButton = memo(function TokenVisibilityIconButton({
  'data-testid': dataTestId,
  displayStatus,
  isIconAlwaysDisplayed = false,
  onUpdateDisplayStatus,
  tokenType,
  iconSize = 'small',
  isForecastView,
}: TokenVisibilityIconButtonProps) {
  const { formatMessage } = useIntl();

  const statementOrForecast = isForecastView
    ? formatMessage({ defaultMessage: 'forecast' })
    : formatMessage({ defaultMessage: 'statement' });

  const label = match({ tokenType, displayStatus })
    .with({ tokenType: TokenType.FILTER, displayStatus: HidableElementVisibility.AVAILABLE }, () =>
      formatMessage(
        { defaultMessage: 'Shown only on designer{br}Click to show on {statementOrForecast}' },
        { statementOrForecast },
      ),
    )
    .with({ tokenType: TokenType.FILTER, displayStatus: HidableElementVisibility.ON_DISPLAY }, () =>
      formatMessage(
        { defaultMessage: 'Shown on {statementOrForecast}{br}Click to show only in designer' },
        { statementOrForecast },
      ),
    )
    .with({ displayStatus: HidableElementVisibility.AVAILABLE }, () =>
      formatMessage({ defaultMessage: 'Hidden on {statementOrForecast}{br}Click to show it' }, { statementOrForecast }),
    )
    .otherwise(() =>
      formatMessage({ defaultMessage: 'Shown on {statementOrForecast}{br}Click to hide it' }, { statementOrForecast }),
    );

  return (
    <IconButton
      css={displayStatus === HidableElementVisibility.ON_DISPLAY && !isIconAlwaysDisplayed && hiddenStyle}
      data-testid={dataTestId}
      icon={DisplayStatusToIcon[displayStatus]}
      label={label}
      size={iconSize}
      onClick={onUpdateDisplayStatus}
    />
  );
});