/* eslint-disable react/forbid-component-props */
import titles from '../config/elements-titles';
import { useStore } from '@/stores/hooks';
import { observer } from 'mobx-react-lite';
import { pick } from 'radash';
import styled from 'styled-components';
import { Tag } from 'ui/elements';

const Container = styled.div`
  display: flex;
  flex-direction: row;
  gap: 5px;
`;

const TagWrapper = styled.div<{ disabled: boolean }>`
  > span {
    pointer-events: ${(props) => (props.disabled ? 'none' : 'auto')};
    opacity: ${(props) => (props.disabled ? '50%' : '')};
  }
`;

const tagsData = pick(titles, ['cbxPartialVAT', 'cbxFloatingRate']);

const { CheckableTag } = Tag;

export const ProductAddon = observer(() => {
  const { $calculation } = useStore();

  function handleChange(elementName: keyof typeof tagsData, checked: boolean) {
    $calculation.element(elementName).setValue(checked);
  }

  return (
    <Container>
      {(Object.keys(tagsData) as Array<keyof typeof tagsData>).map((elementName) => {
        const visible = $calculation.$status.getStatus(elementName);

        return (
          <TagWrapper key={elementName} disabled={visible === 'Disabled'}>
            <CheckableTag
              checked={$calculation.element(elementName).getValue()}
              onChange={(checked) => handleChange(elementName, checked)}
              key={elementName}
              style={{ marginInlineEnd: 0 }}
            >
              {tagsData[elementName]}
            </CheckableTag>
          </TagWrapper>
        );
      })}
    </Container>
  );
});