import * as React from 'react';
import { withTheme } from 'styled-components';
import { mount } from 'enzyme';
import { Theme, domainTheme, theme, aussieTheme, lendiNextTheme, renderWithTheme } from './index';
import { ThemeMap } from './types';
import { Text } from '../../index';

describe('<Theme> component', () => {
  describe('When no props is passed', () => {
    it('should default to `lendi` theme', () => {
      const Component = () => null;
      const WrappedComponent = withTheme(Component);
      const element = mount(
        <Theme>
          <WrappedComponent />
        </Theme>
      );
      expect(element.find(Component).prop('theme').name).toEqual('lendi');
      expect(element.find(Component).prop('theme')).toEqual(theme);
    });
  });

  describe('When using <Theme kind={}>', () => {
    it('should use provided kind', () => {
      const Component = () => null;
      const WrappedComponent = withTheme(Component);
      const mockKind = {
        typography: {},
        asset: {
          font: {
            body: {
              family: "'Open Sans', sans-serif",
            },
            heading: {
              family: "'Cabin', sans-serif",
              weight: '700',
            },
          },
        },
        color: {
          text: {
            main: '#474747',
          },
        },
        name: 'lendi',
      } as ThemeMap;

      const element = mount(
        <Theme kind={mockKind}>
          <WrappedComponent />
        </Theme>
      );

      expect(element.find(Component).prop('theme')).toHaveProperty('typography');
      expect(element.find(Component).prop('theme')).toEqual(mockKind);
    });
  });

  describe('When using <Theme name={}>', () => {
    it('should use provided name: lendi', () => {
      const Component = () => null;
      const WrappedComponent = withTheme(Component);

      const element = mount(
        <Theme name={'lendi'}>
          <WrappedComponent />
        </Theme>
      );

      expect(element.find(Component).prop('theme')).toHaveProperty('name');
      expect(element.find(Component).prop('theme').name).toEqual('lendi');
      expect(element.find(Component).prop('theme')).toEqual(theme);
      /**
       * The `theme` value is widely consumed by downstream consumers, components AND applications.
       * It has wide-ranging impact, therefore any change of values needs to be closely monitored.
       *
       * To safeguard against accidental or unintended changes, tokens are snapshotted.
       */
      expect(element.find(Component).prop('theme')).toMatchSnapshot();
    });
    it('should use provided name: `lendi-next`', () => {
      const Component = () => null;
      const WrappedComponent = withTheme(Component);

      const element = mount(
        <Theme name={'lendi-next'}>
          <WrappedComponent />
        </Theme>
      );

      expect(element.find(Component).prop('theme')).toHaveProperty('name');
      expect(element.find(Component).prop('theme').name).toEqual('lendi-next');
      expect(element.find(Component).prop('theme')).toEqual(lendiNextTheme);
      /**
       * The `theme` value is widely consumed by downstream consumers, components AND applications.
       * It has wide-ranging impact, therefore any change of values needs to be closely monitored.
       *
       * To safeguard against accidental or unintended changes, tokens are snapshotted.
       */
      expect(element.find(Component).prop('theme')).toMatchSnapshot();
    });
    it('should use provided name: domain', () => {
      const Component = () => null;
      const WrappedComponent = withTheme(Component);

      const element = mount(
        <Theme name={'domain'}>
          <WrappedComponent />
        </Theme>
      );

      expect(element.find(Component).prop('theme')).toHaveProperty('name');
      expect(element.find(Component).prop('theme').name).toEqual('domain');
      expect(element.find(Component).prop('theme')).toEqual(domainTheme);
      /**
       * The `theme` value is widely consumed by downstream consumers, components AND applications.
       * It has wide-ranging impact, therefore any change of values needs to be closely monitored.
       *
       * To safeguard against accidental or unintended changes, tokens are snapshotted.
       */
      expect(element.find(Component).prop('theme')).toMatchSnapshot();
    });
    it('should use provided name: aussie', () => {
      const Component = () => null;
      const WrappedComponent = withTheme(Component);

      const element = mount(
        <Theme name={'aussie'}>
          <WrappedComponent />
        </Theme>
      );

      expect(element.find(Component).prop('theme')).toHaveProperty('name');
      expect(element.find(Component).prop('theme').name).toEqual('aussie');
      expect(element.find(Component).prop('theme')).toEqual(aussieTheme);
      /**
       * The `theme` value is widely consumed by downstream consumers, components AND applications.
       * It has wide-ranging impact, therefore any change of values needs to be closely monitored.
       *
       * To safeguard against accidental or unintended changes, tokens are snapshotted.
       */
      expect(element.find(Component).prop('theme')).toMatchSnapshot();
    });
  });
});