import React, {Component} from 'react';
import styled, {keyframes} from 'styled-components';
import {Image} from "semantic-ui-react";

const rotateAddButton = keyframes`
  0% {
    transform : translate(0px, 0px) rotate(0deg);
    box-shadow: 3px 2px 10px 5px #ccc;
  }
  100% {
    transform : translate(0.3px, 0.8px) rotate(90deg);
    box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
  }
`;

const StyledDiv = styled.div`
  background-color : #ff4050;
  padding : 3rem;
  width: 10rem;
  height: 10rem;
  border-radius : 100%;
  border : none;
  position : relative;
  box-shadow: 3px 2px 10px 5px #ccc;
  transition : all .3s ease-out;
  :hover{
    background-color : #ff2436;
  }
  :active{
    animation-name: ${rotateAddButton};
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-direction: normal;
    animation-play-state: running;
    animation-fill-mode: forwards;
  }
`;
const iconStyle = {
  width : "4rem",
  height : "auto",
  position : "absolute",
  top : "20%",
  left : "50%",
  transform : "translateX(-50%)"
};

const nameStyle = {
  position : "absolute",
  top : "50%",
  left : "50%",
  transform : "translateX(-50%)"
}

export default class NewDevice extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  onClickDevice = (event) => {
    console.log(this.props.children);
  };

  render() {
    return (
      <StyledDiv onClick={this.onClickDevice} style={{textAlign: "center"}}>
        <Image src="/img/add.svg" style={{filter : "invert()"}}/>
      </StyledDiv>
    )
  }
}