/*
Copyright (c) 2018 Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import * as React from 'react';
import { mount } from 'enzyme';
import Block from '../block.js';

function retrieveStyles(element) {
  return mount(element).childAt(0).instance().getStyles();
}

describe('Block', function () {
  it('renders themed color if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      color: "primary200"
    }, "test"))).toMatchObject({
      color: '$theme.colors.primary200'
    });
  });
  it('renders provided color if no matching themeable value is found', function () {
    expect(retrieveStyles(React.createElement(Block, {
      color: "red"
    }, "test"))).toMatchObject({
      color: 'red'
    });
  });
  it('renders themed font if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      font: "font200"
    }, "test"))).toMatchObject({
      fontFamily: '$theme.typography.font200.fontFamily',
      fontSize: '$theme.typography.font200.fontSize',
      fontWeight: '$theme.typography.font200.fontWeight'
    });
  });
  it('renders alignContent style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      alignContent: "start"
    }, "test"))).toMatchObject({
      alignContent: 'start'
    });
  });
  it('renders alignItems style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      alignItems: "start"
    }, "test"))).toMatchObject({
      alignItems: 'start'
    });
  });
  it('renders flexDirection style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      flexDirection: "row"
    }, "test"))).toMatchObject({
      flexDirection: 'row'
    });
  });
  it('renders display style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      display: "inline-block"
    }, "test"))).toMatchObject({
      display: 'inline-block'
    });
  });
  it('renders flex style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      flex: "grow"
    }, "test"))).toMatchObject({
      flex: 'grow'
    });
  });
  it('renders grid style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      grid: "100px / 200px"
    }, "test"))).toMatchObject({
      grid: '100px / 200px'
    });
  });
  it('renders gridArea style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridArea: "auto"
    }, "test"))).toMatchObject({
      gridArea: 'auto'
    });
  });
  it('renders gridAutoColumns style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridAutoColumns: "min-content"
    }, "test"))).toMatchObject({
      gridAutoColumns: 'min-content'
    });
  });
  it('renders gridAutoFlow style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridAutoFlow: "row dense"
    }, "test"))).toMatchObject({
      gridAutoFlow: 'row dense'
    });
  });
  it('renders gridAutoRows style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridAutoRows: "20cm"
    }, "test"))).toMatchObject({
      gridAutoRows: '20cm'
    });
  });
  it('renders gridColumn style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridColumn: "1 / 3"
    }, "test"))).toMatchObject({
      gridColumn: '1 / 3'
    });
  });
  it('renders gridColumnEnd style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridColumnEnd: "span 3"
    }, "test"))).toMatchObject({
      gridColumnEnd: 'span 3'
    });
  });
  it('renders gridColumnGap style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridColumnGap: "scale800"
    }, "test"))).toMatchObject({
      gridColumnGap: '$theme.sizing.scale800'
    });
  });
  it('renders gridColumnStart style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridColumnStart: "span 2"
    }, "test"))).toMatchObject({
      gridColumnStart: 'span 2'
    });
  });
  it('renders gridGap style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridGap: "50px"
    }, "test"))).toMatchObject({
      gridGap: '50px'
    });
  });
  it('renders gridRow style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridRow: "1"
    }, "test"))).toMatchObject({
      gridRow: '1'
    });
  });
  it('renders gridRowStart style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridRowStart: "-1"
    }, "test"))).toMatchObject({
      gridRowStart: '-1'
    });
  });
  it('renders gridRowEnd style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridRowEnd: "2"
    }, "test"))).toMatchObject({
      gridRowEnd: '2'
    });
  });
  it('renders gridTemplate style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridTemplate: "1fr / 1fr"
    }, "test"))).toMatchObject({
      gridTemplate: '1fr / 1fr'
    });
  });
  it('renders gridTemplateAreas style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridTemplateAreas: "inherit"
    }, "test"))).toMatchObject({
      gridTemplateAreas: 'inherit'
    });
  });
  it('renders gridTemplateColumns style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridTemplateColumns: "1fr 60px"
    }, "test"))).toMatchObject({
      gridTemplateColumns: '1fr 60px'
    });
  });
  it('renders gridTemplateRows style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      gridTemplateRows: "auto"
    }, "test"))).toMatchObject({
      gridTemplateRows: 'auto'
    });
  });
  it('renders justifyContent style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      justifyContent: "start"
    }, "test"))).toMatchObject({
      justifyContent: 'start'
    });
  });
  it('renders justifyItems style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      justifyItems: "center"
    }, "test"))).toMatchObject({
      justifyItems: 'center'
    });
  });
  it('renders justifySelf style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      justifySelf: "start"
    }, "test"))).toMatchObject({
      justifySelf: 'start'
    });
  });
  it('renders position style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      position: "static"
    }, "test"))).toMatchObject({
      position: 'static'
    });
  });
  it('renders width style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      width: "100px"
    }, "test"))).toMatchObject({
      width: '100px'
    });
  });
  it('renders minWidth style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      minWidth: "100px"
    }, "test"))).toMatchObject({
      minWidth: '100px'
    });
  });
  it('renders maxWidth style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      maxWidth: "100px"
    }, "test"))).toMatchObject({
      maxWidth: '100px'
    });
  });
  it('renders height style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      height: "100px"
    }, "test"))).toMatchObject({
      height: '100px'
    });
  });
  it('renders minHeight style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      minHeight: "100px"
    }, "test"))).toMatchObject({
      minHeight: '100px'
    });
  });
  it('renders maxHeight style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      maxHeight: "100px"
    }, "test"))).toMatchObject({
      maxHeight: '100px'
    });
  });
  describe('Overflow', function () {
    it('renders overflowX styling if provided with scrollX value', function () {
      expect(retrieveStyles(React.createElement(Block, {
        overflow: "scrollX"
      }, "test"))).toMatchObject({
        overflowX: 'scroll'
      });
    });
    it('renders overflowY styling if provided with scrollY value', function () {
      expect(retrieveStyles(React.createElement(Block, {
        overflow: "scrollY"
      }, "test"))).toMatchObject({
        overflowY: 'scroll'
      });
    });
    it('renders overflow styling if provided any other value', function () {
      expect(retrieveStyles(React.createElement(Block, {
        overflow: "auto"
      }, "test"))).toMatchObject({
        overflow: 'auto'
      });
    });
  });
  it('renders overflow style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      overflow: "hidden"
    }, "test"))).toMatchObject({
      overflow: 'hidden'
    });
  });
  it('renders themed margin style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      margin: "scale200"
    }, "test"))).toMatchObject({
      margin: '$theme.sizing.scale200'
    });
  });
  it('renders themed marginTop style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      marginTop: "scale200"
    }, "test"))).toMatchObject({
      marginTop: '$theme.sizing.scale200'
    });
  });
  it('renders themed marginRight style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      marginRight: "scale200"
    }, "test"))).toMatchObject({
      marginRight: '$theme.sizing.scale200'
    });
  });
  it('renders themed marginBottom style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      marginBottom: "scale200"
    }, "test"))).toMatchObject({
      marginBottom: '$theme.sizing.scale200'
    });
  });
  it('renders themed marginLeft style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      marginLeft: "scale200"
    }, "test"))).toMatchObject({
      marginLeft: '$theme.sizing.scale200'
    });
  });
  it('renders themed padding style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      padding: "scale200"
    }, "test"))).toMatchObject({
      padding: '$theme.sizing.scale200'
    });
  });
  it('renders themed paddingTop style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      paddingTop: "scale200"
    }, "test"))).toMatchObject({
      paddingTop: '$theme.sizing.scale200'
    });
  });
  it('renders themed paddingRight style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      paddingRight: "scale200"
    }, "test"))).toMatchObject({
      paddingRight: '$theme.sizing.scale200'
    });
  });
  it('renders themed paddingBottom style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      paddingBottom: "scale200"
    }, "test"))).toMatchObject({
      paddingBottom: '$theme.sizing.scale200'
    });
  });
  it('renders themed paddingLeft style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      paddingLeft: "scale200"
    }, "test"))).toMatchObject({
      paddingLeft: '$theme.sizing.scale200'
    });
  });
  it('renders placeContent style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      placeContent: "end center"
    }, "test"))).toMatchObject({
      placeContent: 'end center'
    });
  });
  it('renders placeItems style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      placeItems: "end center"
    }, "test"))).toMatchObject({
      placeItems: 'end center'
    });
  });
  it('renders placeSelf style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      placeSelf: "center start"
    }, "test"))).toMatchObject({
      placeSelf: 'center start'
    });
  });
  it('renders flexWrap style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      flexWrap: true
    }, "test"))).toMatchObject({
      flexWrap: 'wrap'
    });
  });
  it('renders left style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      left: "1px"
    }, "test"))).toMatchObject({
      left: '1px'
    });
  });
  it('renders top style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      top: "1px"
    }, "test"))).toMatchObject({
      top: '1px'
    });
  });
  it('renders right style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      right: "1px"
    }, "test"))).toMatchObject({
      right: '1px'
    });
  });
  it('renders bottom style if provided', function () {
    expect(retrieveStyles(React.createElement(Block, {
      bottom: "1px"
    }, "test"))).toMatchObject({
      bottom: '1px'
    });
  });
  it('applies other props if provided', function () {
    var onClickMock = jest.fn();
    var example = mount(React.createElement(Block, {
      onClick: onClickMock
    }, "test"));
    example.simulate('click');
    expect(onClickMock).toHaveBeenCalled();
  });
});