import React from 'react';
import 'jest-styled-components/native';
import { AtomOverline } from './index';
import { ITypographyProps } from '../TypographyProps';
import { render } from '@testing-library/react-native';

describe('[Native] AtomOverline', () => {
  it('render component', () => {
    const body : ITypographyProps = {
      text: 'Overline Text',
      styles: {},
      size: 'large',
    }
    const component = render(<AtomOverline weight={'bold'} {...body} />);
    component.getByText(body.text);
  });
  it('Render component color', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      color: 'neutral700',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].color).toEqual('#132730');
  });

  it('Render component align left', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      align: 'left',
      styles: {justifyContent: 'center'}
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].justifyContent).toEqual('flex-start');
  });

  it('Render component align center', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      align: 'center',
      styles: {justifyContent: 'flex-start'}
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].justifyContent).toEqual('center');
  });

  it('Render component align right', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      align: 'right',
      styles: {justifyContent: 'center'}
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].justifyContent).toEqual('flex-end');
  });

  it('Render component weight light', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      weight: 'light',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].fontFamily).toEqual('Outfit-Light');
  });

  it('Render component weight medium', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      weight: 'medium',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].fontFamily).toEqual('Outfit-Medium');
  });

  it('Render component weight thin', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      weight: 'thin',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].fontFamily).toEqual('Outfit-Thin');
  });

  it('Render component weight extralight', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      weight: 'extralight',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].fontFamily).toEqual('Outfit-ExtraLight');
  });

  it('Render component weight regular', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      weight: 'regular',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].fontFamily).toEqual('Outfit-Regular');
  });

  it('Render component weight semibold', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      weight: 'semibold',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].fontFamily).toEqual('Outfit-SemiBold');
  });

  it('Render component weight bold', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      weight: 'bold',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].fontFamily).toEqual('Outfit-Bold');
  });

  it('Render component weight extrabold', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      weight: 'extrabold',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].fontFamily).toEqual('Outfit-ExtraBold');
  });

  it('Render component weight black', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      weight: 'black',
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].fontFamily).toEqual('Outfit-Black');
  });
  it('Render component align center ignoring style align left', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      align: 'center',
      styles: {justifyContent: 'flex-start'}
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].justifyContent).toEqual('center');
  });
  it('Render component style textDecorationLine underline', () => {
    const props: ITypographyProps  = {
      text: "testText",
      size: 'xlarge',
      styles: {textDecorationLine: 'underline'}
    };
    let component = render(
        <AtomOverline {...props} />
    );

    const element = component.getByText(props.text)

    expect(element.props.style[0].textDecorationLine).toEqual('underline');
  });
});
