import styled from 'styled-components/native';
import { CSSObject } from 'styled-components';
import { colors, mxSetup } from 'data/dataMx';
import RenderHtml from 'react-native-render-html';
import { Platform } from 'react-native';

const { mediaQuery: { tablet, mobile } } = mxSetup;

export interface IStylesProps {
  align: string;
  color: colors;
  font: string;
  fontWeight: number;
  styles?: CSSObject;
};

export const SubtitleXLarge = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 32px;
  line-height: 32px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }

  @media (max-width: ${ mobile.max } ) {
    font-size: 30px;
    line-height: 32px;
  }

  @media (min-width: ${ tablet.min }) and (max-width: ${ tablet.max } ) {
    font-size: 32px;
    line-height: 32px;
  }
`;

export const SubtitleLarge = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 28px;
  line-height: 28px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }

  @media (max-width: ${ mobile.max } ) {
    font-size: 26px;
    line-height: 26px;
  }

  @media (min-width: ${ tablet.min }) and (max-width: ${ tablet.max } ) {
    font-size: 28px;
    line-height: 28px;
  }
`;

export const SubtitleMedium = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 24px;
  line-height: 24px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }

  @media (max-width: ${ mobile.max } ) {
    font-size: 22px;
    line-height: 22px;
  }

  @media (min-width: ${ tablet.min }) and (max-width: ${ tablet.max } ) {
    font-size: 24px;
    line-height: 24px;
  }
`;

export const SubtitleSmall = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 22px;
  line-height: 22px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }

  @media (max-width: ${ mobile.max } ) {
    font-size: 20px;
    line-height: 20px;
  }

  @media (min-width: ${ tablet.min }) and (max-width: ${ tablet.max } ) {
    font-size: 22px;
    line-height: 22px;
  }
`;

export const SubtitleXSmall = styled.Text`
  ${({ styles }) => styles};
  font-family: ${({ font }: IStylesProps) => font};
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.2px;
  display: flex;
  justify-content: ${({ align }: IStylesProps) => align};
  color: ${({ color }: IStylesProps) => color};
  ${
    ({ fontWeight }: IStylesProps) => {
      if (Platform.OS == 'ios') {
        return { fontWeight }
      }
    }
  }

  @media (max-width: ${ mobile.max } ) {
    font-size: 18px;
    line-height: 18px;
  }

  @media (min-width: ${ tablet.min }) and (max-width: ${ tablet.max } ) {
    font-size: 20px;
    line-height: 20px;
  }
`;

export const HtmlContent = styled(RenderHtml)`
`;
