import React, { Component, PropTypes } from 'react';
import { range } from '../utils/utils';
import Hand from './ClockHand';
import Face from './ClockFace';
const outerNumbers = [0, ...range(13, 24)];
const innerNumbers = [12, ...range(1, 12)];
const innerSpacing = 1.7;
const step = 360 / 12;
class Hours extends Component {
static propTypes = {
center: PropTypes.shape({
x: PropTypes.number,
y: PropTypes.number,
}),
format: PropTypes.oneOf(['24hr', 'ampm']),
onChange: PropTypes.func,
onHandMoved: PropTypes.func,
radius: PropTypes.number,
selected: PropTypes.number,
spacing: PropTypes.number,
theme: PropTypes.object, // eslint-disable-line
};
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.handNode.mouseStart(event);
};
handleTouchStart = (event) => {
this.handNode.touchStart(event);
};
valueFromDegrees(degrees) {
if (this.props.format === 'ampm' || (this.props.format === '24hr' && this.state.inner)) {
return innerNumbers[degrees / step];
}
return outerNumbers[degrees / step];
}
renderInnerFace(innerRadius) {
if (this.props.format !== '24hr') return undefined;
return (