import styled from 'styled-components/native';
import { themeDefault } from '../../AppProvider/ITheme';
import { Pressable } from '../../Pressable';
import { RFValue } from '../../RFValue';
import { TextNative } from '../../TextNative';

export const ButtonComponent = styled(Pressable)<any>`
   background: ${(props) => `${props.theme.primary || themeDefault.primary}`};
   padding: 10px;
   overflow: hidden;
   border-radius: 5px;
   ${(props) => props.rounded && `border-radius: 40px;`}
   ${(props) => props.variant === 'primary' && `background: ${props.theme.primary || themeDefault.primary};`}
   ${(props) => props.variant === 'secondary' && `background: ${props.theme.secondary || themeDefault.secondary};`}
   ${(props) => props.variant === 'success' && `background: ${props.theme.success || themeDefault.success};`}
   ${(props) => props.variant === 'info' && `background: ${props.theme.info || themeDefault.info};`}
   ${(props) => props.variant === 'warning' && `background: ${props.theme.warning || themeDefault.warning};`}
   ${(props) => props.variant === 'danger' && `background: ${props.theme.danger || themeDefault.danger};`}
   ${(props) => props.variant === 'light' && `background: ${props.theme.light || themeDefault.light};`}
   ${(props) => props.variant === 'dark' && `background: ${props.theme.dark || themeDefault.dark};`}
   ${(props) => props.variant === 'link' && `background: transparent;`}
  
  ${(props) => props.outline && `border-width: 2px;`}
  ${(props) => props.outline && `background: transparent;`}
  ${(props) =>
     props.outline && props.variant === 'primary' && `border-color: ${props.theme.primary || themeDefault.primary};`}
  ${(props) =>
     props.outline &&
     props.variant === 'secondary' &&
     `border-color: ${props.theme.secondary || themeDefault.secondary};`}
  ${(props) =>
     props.outline && props.variant === 'success' && `border-color: ${props.theme.success || themeDefault.success};`}
  ${(props) => props.outline && props.variant === 'info' && `border-color: ${props.theme.info || themeDefault.info};`}
  ${(props) =>
     props.outline && props.variant === 'warning' && `border-color: ${props.theme.warning || themeDefault.warning};`}
  ${(props) =>
     props.outline && props.variant === 'danger' && `border-color: ${props.theme.danger || themeDefault.danger};`}
  ${(props) =>
     props.outline && props.variant === 'light' && `border-color: ${props.theme.light || themeDefault.light};`}
  ${(props) => props.outline && props.variant === 'dark' && `border-color: ${props.theme.dark || themeDefault.dark};`}
  ${(props) => props.variant === 'link' && `border-width: 0px;`}
  ${(props) => props.size === 'sm' && `padding: 5px;`}
  ${(props) => props.size === 'lg' && `padding: 12px;`}
  
`;

export const ButtonText = styled(TextNative)<any>`
   text-align: center;
   color: white;
   font-size: ${RFValue(14)}px;
   ${(props) => props.size === 'sm' && `font-size: ${RFValue(12)}px`}
  ${(props) => props.size === 'lg' && `font-size: ${RFValue(16)}px`}
   ${(props) => props.variant === 'light' && `color: ${props.theme.light_text || '#666'};`}
   ${(props) => props.variant === 'link' && `color: ${props.theme.primary || themeDefault.primary};`}
   
   ${(props) =>
      props.outline && props.variant === 'primary' && `color: ${props.theme.primary || themeDefault.primary};`}
   ${(props) =>
      props.outline && props.variant === 'secondary' && `color: ${props.theme.secondary || themeDefault.secondary};`}
   ${(props) =>
      props.outline && props.variant === 'success' && `color: ${props.theme.success || themeDefault.success};`}
   ${(props) => props.outline && props.variant === 'info' && `color: ${props.theme.info || themeDefault.info};`}
   ${(props) =>
      props.outline && props.variant === 'warning' && `color: ${props.theme.warning || themeDefault.warning};`}
   ${(props) => props.outline && props.variant === 'danger' && `color: ${props.theme.danger || themeDefault.danger};`}
   ${(props) => props.outline && props.variant === 'light' && `color: ${props.theme.light || themeDefault.light};`}
   ${(props) => props.outline && props.variant === 'dark' && `color: ${props.theme.dark || themeDefault.dark};`}
`;
