import type { Elements } from '../config/map/values';
import { useStatus } from '@/stores/calculation/statuses/hooks';
import { useValue } from '@/stores/calculation/values/hooks';
import type { Values } from '@/stores/calculation/values/types';
import { observer } from 'mobx-react-lite';
import type { ComponentType } from 'react';
import styled from 'styled-components';

type BuilderProps = {
  elementName: Elements;
  valueName: Values;
};

const Wrapper = styled.div`
  margin-bottom: 24px;
`;

export function buildReadonly<T>(
  Component: ComponentType<T>,
  { elementName, valueName }: BuilderProps
) {
  return observer((props: T) => {
    const [value] = useValue(valueName);
    const status = useStatus(elementName);

    return (
      <Wrapper>
        <Component readOnly status={status} value={value} {...props} />
      </Wrapper>
    );
  });
}