import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH5 } from '../../common/s-components/typography/s-h5';
import { theme } from '../../app/theme';
import { TCssRules } from '../../common/types';
import { TKnobVariant } from '../types';
import { getKnobBgColor, getKnobBorderColor } from '../transducers';
import { Touchable } from '../../common/components/touchable';

type TProps = TCssRules & {
  variant: TKnobVariant;
  onPress?: () => void;
  selected?: boolean;
  size?: number;
  borderRadius?: number;
  children: React.ReactNode;
};

export const Knob = (props: TProps) => {
  const {
    variant,
    children,
    onPress,
    size,
    borderRadius,
    selected,
    ...rest
  } = props;

  const borderColor = getKnobBorderColor(variant);
  const bgColor = getKnobBgColor(variant, selected);

  return (
    <Touchable onPress={onPress}>
      <SBox
        width={size}
        height={size}
        alignItems="center"
        justifyContent="center"
        borderRadius={borderRadius}
        borderWidth={2}
        borderColor={borderColor}
        bg={bgColor}
        {...rest}
      >
        <SH5 letterSpacing={1.2} color={theme.colors.white}>
          {children}
        </SH5>
      </SBox>
    </Touchable>
  );
};

Knob.defaultProps = {
  borderRadius: 8,
  size: 44,
  selected: false,
  onPress: () => {},
};