// @flow
import React from 'react';
import styled from 'styled-components';
import { getSpacingRules } from '../../../mixins/spacing';
import { getStackeeRules } from '../../../mixins/stackee';
import type { SegmentedControlProps } from './segmented-control.proptypes';
import { SegmentedControlContext } from './segmented-control.proptypes';
import { Box } from '../../../primitives/box';

const SegmentedControlContainer = styled.div`
  &&& {
    ${getSpacingRules}
  }

  ${getStackeeRules};
`;

export const SegmentedControl = ({
  value,
  onChange,
  children,
  spacing,
  grow,
  shrink,
  basis,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
}: SegmentedControlProps) => {
  const segmentedControlContextValues = {
    selectedValue: value,
    onItemClick: onChange,
  };

  return (
    <SegmentedControlContainer
      {...{ spacing, grow, shrink, basis }}
      data-cy={dataCy}
      data-qa={dataQa}
      id={id}
    >
      <SegmentedControlContext.Provider value={segmentedControlContextValues}>
        <Box stacked="row">{children}</Box>
      </SegmentedControlContext.Provider>
    </SegmentedControlContainer>
  );
};

SegmentedControl.displayName = 'SegmentedControl';
