import Inferno from 'inferno'
import Component from 'inferno-component'
import styled from 'styled-components'

import { Link } from 'inferno-router'
import { Tabs, Tab, TabIcon } from '@slup/tabs'
import { Logo } from '../components/logo'

const LogoContainer = styled.div`
  width: 100%;
  height: 100%;
`

const CleanLink = styled(Link)`
  text-decoration: none;
`

export class Home extends Component {
  tabs = [
    {
      text: 'item one',
      icon: <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
    },
    {
      text: 'item two',
      icon: <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
    },
    {
      text: 'item three',
      icon: <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
    }
  ]

  state = { selected: 0 }

  handleClick(selected) {
    this.setState({ selected })
  }

  render() {
    return(
      <LogoContainer>
        <Tabs
          primary
          fit
          center
          selected={this.state.selected}>
          {this.tabs.map((item, i) => {
            return(
              <Tab
                onClick={() => this.handleClick(i)}
                selected={this.state.selected == i}
              >
                <TabIcon>{item.icon}</TabIcon>
                <span>{item.text}</span>
              </Tab>
            )
          })}
        </Tabs>
      </LogoContainer>
    )
  }
}

@@ -156,24 +156,18 @@
 t %7B 
-Tabs, Tab, TabIc
+RaisedButt
 on %7D
@@ -179,19 +179,22 @@
  '@slup/
-tab
+button
 s'%0Aimpor
@@ -271,35 +271,124 @@
 %60%0A  
-width: 100%25;%0A  height: 100%25
+display: flex;%0A  flex: 1;%0A  height: 100%25;%0A  align-items: center;%0A  justify-content: center;%0A  flex-direction: column
 ;%0A%60%0A
@@ -418,16 +418,17 @@
 ed(Link)
+ 
 %60%0A  text
@@ -493,976 +493,43 @@
 %7B%0A  
-tabs = %5B%0A    %7B%0A      text: 'item one',%0A      icon: %3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z%22/%3E%3C/svg%3E%0A    %7D,%0A    %7B%0A      text: 'item two',%0A      icon: %3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z%22/%3E%3C/svg%3E%0A    %7D,%0A    %7B%0A      text: 'item three',%0A      icon: %3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z%22/%3E%3C/svg%3E%0A    %7D%0A  %5D%0A%0A  state = %7B selected: 0 %7D%0A%0A  handleClick(selected) %7B%0A    this.setState(%7B selected %7D
+handleClick() %7B%0A    console.log('a'
 )%0A  
@@ -546,32 +546,33 @@
 r() %7B%0A    return
+ 
 (%0A      %3CLogoCon
@@ -591,199 +591,36 @@
     
-%3CTabs%0A          primary%0A          fit%0A          center%0A          selected=%7Bthis.state.selected%7D%3E%0A          %7Bthis.tabs.map((item, i) =%3E %7B%0A            return(%0A              %3CTab%0A               
+%7BLogo%7D%0A        %3CRaisedButton
  onC
@@ -629,14 +629,8 @@
 ck=%7B
-() =%3E 
 this
@@ -645,232 +645,37 @@
 lick
-(i)%7D%0A                selected=%7Bthis.state.selected == i%7D%0A              %3E%0A                %3CTabIcon%3E%7Bitem.icon%7D%3C/TabIcon%3E%0A                %3Cspan%3E%7Bitem.text%7D%3C/span%3E%0A              %3C/Tab%3E%0A            )%0A          %7D)%7D%0A        %3C/Tabs
+%7D%3EGet started !%3C/RaisedButton
 %3E%0A  
@@ -706,9 +706,8 @@
  )%0A  %7D%0A%7D
-%0A

Revert home changes