// @flow
import { currentTheme } from '../../../utils/tests';
import {
  focusedBoxShadow,
  darkModeBoxShadow,
  focusedBorderShadow,
  focusedBorderColor,
  focusedBorderRadius,
  hoverBackgroundColor,
  activeBackgroundColor,
} from './focus.css-rules';
import { BRACKET_REGEX } from '../../utils/color';

describe('focus', () => {
  describe('focusedBoxShadow', () => {
    it('returns a valid box shadow', () => {
      const shadow = focusedBoxShadow({ theme: currentTheme });
      expect(shadow).toBe('0 1px 5px rgba(255, 255, 255, 0.10)');
    });
  });

  describe('darkModeBoxShadow', () => {
    it('returns a valid box shadow', () => {
      const shadow = darkModeBoxShadow({ theme: currentTheme });
      expect(shadow).toBe('0 0 0 2px #ffffff');
    });
  });

  describe('focusedBorderShadow', () => {
    it('applies an inset box shadow by default', () => {
      const shadow = focusedBorderShadow({});
      expect(shadow).toContain('inset');
    });

    it('applies an outset box shadow if inset is false', () => {
      const shadow = focusedBorderShadow({ inset: false });
      expect(shadow).not.toContain('inset');
    });
  });

  describe('focusedBorderColor', () => {
    it('returns a valid hex code', () => {
      const color = focusedBorderColor({ theme: currentTheme });
      expect(color).toBeHexCode();
    });
  });

  describe('focusedBorderRadius', () => {
    it('sets border radius to 0 by default', () => {
      const radius = focusedBorderRadius({});
      expect(radius).toBe('0px');
    });

    it('sets border radius to a custom border radius value', () => {
      const radius = focusedBorderRadius({ borderRadius: 13 });
      expect(radius).toBe('13px');
    });
  });

  describe('hoverBackgroundColor', () => {
    it('returns a valid rgba color', () => {
      const color = hoverBackgroundColor({ theme: currentTheme });
      expect(color).toContain('rgba');
    });

    it('sets the opacity to 0.25', () => {
      const color = hoverBackgroundColor({ theme: currentTheme });
      const rgba = color.match(BRACKET_REGEX);
      expect(rgba).toBeDefined();

      if (rgba) {
        const opacity = rgba[1].split(', ').slice(-1)[0];
        expect(opacity).toBe('0.25');
      }
    });
  });

  describe('activeBackgroundColor', () => {
    it('returns a valid rgba color', () => {
      const color = activeBackgroundColor({ theme: currentTheme });
      expect(color).toContain('rgba');
    });

    it('sets the opacity to 0.5', () => {
      const color = activeBackgroundColor({ theme: currentTheme });
      const rgba = color.match(BRACKET_REGEX);
      expect(rgba).toBeDefined();

      if (rgba) {
        const opacity = rgba[1].split(', ').slice(-1)[0];
        expect(opacity).toBe('0.50');
      }
    });
  });
});
