import React from 'react';
import utils from '../../utils';
import Face from './face';
import Hand from './hand';
const outerNumbers = [0, ...utils.range(13, 24)];
const innerNumbers = [12, ...utils.range(1, 12)];
const innerSpacing = 1.7;
const step = 360 / 12;
class Hours extends React.Component {
static propTypes = {
format: React.PropTypes.oneOf(['24hr', 'ampm']),
onChange: React.PropTypes.func,
onHandMoved: React.PropTypes.func,
selected: React.PropTypes.number
};
state = {
inner: this.props.format === '24hr' && this.props.selected > 0 && this.props.selected <= 12
};
handleHandMove = (degrees, radius) => {
const currentInner = radius < this.props.radius - this.props.spacing * innerSpacing;
if (this.props.format === '24hr' && this.state.inner !== currentInner) {
this.setState({inner: currentInner}, () => {
this.props.onChange(this.valueFromDegrees(degrees));
});
} else {
this.props.onChange(this.valueFromDegrees(degrees));
}
};
handleMouseDown = (event) => {
this.refs.hand.mouseStart(event);
};
handleTouchStart = (event) => {
this.refs.hand.touchStart(event);
};
valueFromDegrees (degrees) {
if (this.props.format === 'ampm' || this.props.format === '24hr' && this.state.inner) {
return innerNumbers[degrees / step];
} else {
return outerNumbers[degrees / step];
}
}
renderInnerFace (innerRadius) {
if (this.props.format === '24hr') {
return (