import React from 'react'
import { templateHandler } from './styles/templateHandler'

function removeWhitespace(string) {
  return string.replace(/(\s|\t|\n|\r| )+/, '')
}

test('transpiles correctly', () => {
  const result = templateHandler `eh`
  expect(result).toEqual('eh')
})

test('transpiles with theme', () => {
  templateHandler.setTheme({
    moose: 'moose',
  })

  const canada = '.canada${}'
  const result = templateHandler `
    ${canada}
    .eh {
      border-color: hotpink;
      color: ${theme => theme && theme.moose};
    }
  `

  const expectedRaw = `
    ${canada}
    .eh {
      border-color: hotpink;
      color: moose;
    }
  `

  const actual = removeWhitespace(result)
  const expected = removeWhitespace(expectedRaw)

  expect(actual).toEqual(expected)
})

test('works with selectors', () => {
  console.log('@TODO render a style')
})

test('works without selectors', () => {
  console.log('@TODO render a style withId')
})


test('works with media queries', () => {
  // @mixin phone-or-smaller
  const media = styled.todo `
    desktopOrLarger() { color: tomato; }
    tabletOrLarger() { color: tomato; }
    phoneOrLarger() { color: tomato; }
    desktopOrSmaller() { color: tomato; }
    tabletOrSmaller() { color: tomato; }
    phoneOrSmaller() { color: tomato; }
  `
})

test('getSelector', () => {
  const styled = require('./styles/styled')

  const styles = styled.todo `
    color: hotpink;
  `

  @styles()
  class Eh extends React.Component { }

  // const renderedToString = Eh
  // const expectedStyle = `
  //   .Eh-1 {
  //     color: hotpink;
  //   }
  // `
})

// desktopOrLarger()
// tabletOrLarger()
// desktopOrSmaller()
// tabletOrSmaller()
// phoneOrSmaller()
// phoneOrLarger()