import { Component } from 'react'
import tinytime from 'tinytime'
import styled from 'styled-components'
import Paper from 'material-ui/Paper'

const Circle = styled(Paper)`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 10em;
  width: 10em;
`

export default class DateTime extends Component {
  static defaultProps = {
    interval: 10000
  }

  state = {
    date: new Date()
  }

  componentDidMount () {
    const { interval } = this.props
    this.interval = setInterval(() => this.setState({ date: new Date() }), interval)
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  render () {
    const { date } = this.state

    return (
      <Circle circle>
        <h1>{tinytime('{H}:{mm}').render(date)}</h1>
        <span>{tinytime('{DD}.{Mo}.{YYYY}').render(date)}</span>
      </Circle>
    )
  }
}

@@ -109,37 +109,33 @@
 ort 
-Paper
+Widget
  from '
-material-ui/Paper
+../../widget
 '%0A%0Ac
@@ -139,22 +139,24 @@
 %0A%0Aconst 
-Circle
+TimeItem
  = style
@@ -160,139 +160,126 @@
 yled
-(Paper)%60%0A  display: flex;%0A  flex-direction: column;%0A  justify-content: center;%0A  align-items: center;%0A  height: 10em;%0A  width: 10em
+.div%60%0A  font-size: 4em;%0A  text-align: center;%0A%60%0A%0Aconst DateItem = styled.div%60%0A  font-size: 1.5em;%0A  text-align: center
 ;%0A%60%0A
@@ -681,17 +681,16 @@
 s.state%0A
-%0A
     retu
@@ -705,21 +705,14 @@
    %3C
-Circle circle
+Widget
 %3E%0A  
@@ -718,18 +718,24 @@
        %3C
-h1
+TimeItem
 %3E%7Btinyti
@@ -768,10 +768,16 @@
 )%7D%3C/
-h1
+TimeItem
 %3E%0A  
@@ -783,20 +783,24 @@
        %3C
-span
+DateItem
 %3E%7Btinyti
@@ -841,12 +841,16 @@
 )%7D%3C/
-span
+DateItem
 %3E%0A  
@@ -859,14 +859,14 @@
   %3C/
-Circle
+Widget
 %3E%0A  

Use widget component