import * as React from 'react';
import { css } from 'emotion';
import { ValidationState } from '../../../models/Validation';
import Checkbox, { CheckboxProps } from '../../../containers/checkbox/Checkbox';

class CheckboxOne extends React.PureComponent<CheckboxProps, {}> {
	render() {
		return (
			<Checkbox
				{...this.props}
				render={(onChange: () => void) => {
					let inputStyle = css`
						position: absolute;
						opacity: 0;

						& + label {
							position: relative;
							cursor: pointer;
							padding: 0;
							font-size: 15.4rem;
							display: table;
							line-height: 22rem;
							color: ${this.props.palette.color10};
							span {
								display: table-cell;
							}
						}

						& + label .checkbox:before {
							content: '';
							margin-right: 10px;
							display: inline-block;
							vertical-align: middle;
							border-radius: 2px;
							width: 21px;
							height: 21px;
							background: transparent;
							box-sizing: border-box;
							border: 1px solid ${this.props.palette.color10};
						}

						&:hover,
						&:focus {
							& + label {
								text-decoration: underline;
							}
						}

						&:checked + label .checkbox:before {
							background: ${this.props.palette.color3};
							border-color: ${this.props.palette.color3};
						}

						&:disabled + label {
							color: ${this.props.palette.main12Color};
							cursor: auto;
						}

						&:disabled + label .checkbox:before {
							border-color: ${this.props.palette.main12Color};
							background: ${this.props.palette.main12Color};
						}

						&:checked + label .checkbox:after {
							content: '✔';
							position: absolute;
							left: 4px;
							top: 2px;
							font-size: 18rem;
							color: ${this.props.palette.color2};
						}
					`;

					let invalid = null;
					switch (this.props.valid) {
						case ValidationState.Valid:
							inputStyle = css`
								${inputStyle};
								& + label .checkbox:before {
									border: 1px solid ${this.props.palette.color10};
								}
								& + label {
									color: ${this.props.palette.color10};
								}
							`;
							invalid = false;
							break;

						case ValidationState.Invalid: {
							inputStyle = css`
								${inputStyle};
								& + label .checkbox:before {
									border: 1px solid ${this.props.palette.color8};
								}
								& + label {
									color: ${this.props.palette.color8};
								}
							`;
							invalid = true;
							break;
						}

						case ValidationState.None:
							invalid = null;
							break;

						default:
							break;
					}

					return (
						<div data-automation={this.props.automationName}>
							<input
								className={inputStyle}
								id={this.props.id}
								type="checkbox"
								disabled={this.props.disabled}
								checked={!!this.props.checked}
								onChange={() => {
									onChange();
								}}
								required={this.props.required}
								aria-required={this.props.required}
								aria-invalid={invalid}
							/>
							<label htmlFor={this.props.id}>
								<span className="checkbox" />
								<span>{this.props.label}</span>
							</label>
						</div>
					);
				}}
			/>
		);
	}
}

export default CheckboxOne;