import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const color1 = 'official';

const SpinnerWrapper = styled.div`
display: flex;
align-items: center;
@keyframes "lds-spinner" {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.lds-spinner {
	color: ${props => props.color ? props.color : color1};
	display: inline-block;
	position: relative;
	width: ${props => props.width ? `${props.width}px` : '64px'};
	height: ${props => props.height ? `${props.height}px` : '64px'};
	div {
		transform-origin: ${props => `${props.width ? `${props.width/2}px` : '32px'} ${props.height ? `${props.height/2}px` : '32px'}`};
		animation: lds-spinner 1.2s linear infinite;
		&:after {
			content: " ";
			display: block;
			position: absolute;
			top: ${props => props.top ? props.top : '3px'};
			left: ${props => props.left ? props.left : '29px'};
			width: ${props => props.spikeWidth ? props.spikeWidth : '5px'};
			height: ${props => props.spikeHeight ? props.spikeHeight : '14px'};
			border-radius: 20%;
			background: ${props => props.color ? props.color : '#fff'};
		}
		&:nth-child(1) {
			transform: rotate(0deg);
			animation-delay: -1.1s;
		}
		&:nth-child(2) {
			transform: rotate(30deg);
			animation-delay: -1s;
		}
		&:nth-child(3) {
			transform: rotate(60deg);
			animation-delay: -0.9s;
		}
		&:nth-child(4) {
			transform: rotate(90deg);
			animation-delay: -0.8s;
		}
		&:nth-child(5) {
			transform: rotate(120deg);
			animation-delay: -0.7s;
		}
		&:nth-child(6) {
			transform: rotate(150deg);
			animation-delay: -0.6s;
		}
		&:nth-child(7) {
			transform: rotate(180deg);
			animation-delay: -0.5s;
		}
		&:nth-child(8) {
			transform: rotate(210deg);
			animation-delay: -0.4s;
		}
		&:nth-child(9) {
			transform: rotate(240deg);
			animation-delay: -0.3s;
		}
		&:nth-child(10) {
			transform: rotate(270deg);
			animation-delay: -0.2s;
		}
		&:nth-child(11) {
			transform: rotate(300deg);
			animation-delay: -0.1s;
		}
		&:nth-child(12) {
			transform: rotate(330deg);
			animation-delay: 0s;
		}
	}
}
`;

export default class Spinner extends React.Component{

	render() {
		return (
			<SpinnerWrapper {...this.props}>
				{
					this.props.visibility && <div className="lds-spinner">
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
						<div></div>
					</div>
				}
			</SpinnerWrapper>
		)
	}
}

Spinner.PropTypes = {
	color : PropTypes.string,
	width : PropTypes.number,
	height :PropTypes.number,
	top : PropTypes.string,
	left : PropTypes.string,
	spikeWidth : PropTypes.string,
	spikeHeight : PropTypes.string
};