import { CSSObject } from 'styled-components';
import styled from 'styled-components/native';
import { ButtonHeight, ButtonSize, IStylesTheme } from '../ButtonProps';

interface IStylesProps {
  width?: string;
  theme: IStylesTheme;
  font: string;
  size: ButtonSize;
  styles?: CSSObject;
  shape: 'square' | 'default' | 'circle';
  haveText: boolean;
  justifyContent?: string;
}
interface IStylesIconProps {
  haveText: boolean;
}

export const GeneralStyledButton = styled.TouchableOpacity`
  ${({ styles }) => styles}
  position: relative;
  align-items: center;
  background-color: ${({ theme }: IStylesProps) => theme.backgroundColor};
  border-radius: ${({ shape }: IStylesProps) => (shape === 'default' ? '4px' : (shape === 'circle' ? '90px' : '0'))};
  border-color: ${({ theme }: IStylesProps) => theme.borderColor};
  border-width: ${({ theme }: IStylesProps) => theme.borderWidth};
  display: flex;
  flex-direction: row;
  height: ${({ size, shape, width}: IStylesProps) => shape === 'circle' && width? width : ButtonHeight[size]};
  justify-content: ${({ justifyContent }: IStylesProps) => justifyContent};;
  width: ${({ haveText, shape, size, width }: IStylesProps) => width? width : (haveText? 'fit-content' : 
    (shape === 'circle' && (size === 'small' )? '48px' : '64px')) };
  padding: ${({ haveText }: IStylesProps) => haveText ? '8px 24px' : '0'};
  text-align: center;
  margin: 0;
`;

export const ContentText = styled.Text`
  color: ${({ theme }: IStylesProps) => theme.color};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: ${({ size }: IStylesProps) => size === 'small' ? '12px' : '16px'};
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 16px;
`;

export const IconContainer = styled.View`
${({ haveText }: IStylesIconProps) => haveText ?
    `
    margin-left: 5px;
    margin-right: 5px;
    `
    :
    `
     position: absolute; 
     left: 0; 
     right: 0; 
     margin-left: auto; 
     margin-right: auto; 
     align-items: center;
  `
  }
`;
