import styled from 'styled-components';
import Typography from '../ui/typography';
import {createAnimationView} from '../animations';
import {View} from 'react-native';

export const NavBarItem = styled(Typography)<any>`
  padding: ${({theme: {spacing}}) => spacing[3]}px;
  background: ${({isSelected, theme: {color}}) =>
    isSelected ? color.primary : 'white'};

  color: ${({
    isSelected,
    theme: {
      color: {dim},
    },
  }) => (isSelected ? 'white' : 'rgba(0,0,0,.9)')};
`;

export const NavBarSubItem = styled(View)<any>`
  background: ${({theme: {color}}) => color.primaryDarker};
  padding: ${({theme: {spacing}}) => spacing[3]}px;
  color: white;
`;

export const ShowItemComponent = createAnimationView(
  {
    opacity: {from: 0, to: 1},
    translateY: {from: -20, to: 0},
  },
  ({opacity, translateY}) => ({opacity, transform: [{translateY}]}),
);

export const ShowSubItem = createAnimationView(
  {
    opacity: {from: 0, to: 1},
    translateX: {from: -20, to: 0},
  },
  ({opacity, translateX}) => ({opacity, transform: [{translateX}]}),
);