import Domify from 'react-domify';
import React from 'react';
import Markdown from 'react-markdown';

const Row = (props) => {
	const styles = {
		display: 'flex',
		flexWrap: 'wrap',
		marginLeft: -10,
		marginRight: -10,
		...props.style,
	};

	return (
		<div
			{...props}
			className={props.className || 'Row'}
			style={styles}
			/>
	);
};

const Col = (props) => {
	const styles = {
		flex: props.width ? null : '1 1 0',
		minHeight: 1,
		paddingLeft: 10,
		paddingRight: 10,
		width: props.width || '100%',
		...props.style,
	};

	return (
		<div
			{...props}
			className={props.className || 'Col'}
			style={styles}
			/>
	);
};

const ExplorerFieldType = React.createClass({
	getInitialState () {
		return {
			readmeIsVisible: !!this.props.readme,
			filter: this.props.FilterComponent.getDefaultValue(),
			value: this.props.value,
		};
	},
	componentWillReceiveProps (newProps) {
		if (this.props.params.type === newProps.params.type) return;

		this.setState({
			filter: newProps.FilterComponent.getDefaultValue(),
			readmeIsVisible: newProps.readme
				? this.state.readmeIsVisible
				: false,
			value: newProps.value,
		});
	},
	onFieldChange (e) {
		var logValue = typeof e.value === 'string' ? `"${e.value}"` : e.value;
		console.log(`${this.props.params.type} field value changed:`, logValue);
		this.setState({
			value: e.value,
		});
	},
	onFilterChange (value) {
		console.log(`${this.props.params.type} filter value changed:`, value);
		this.setState({
			filter: value,
		});
	},
	render () {
		const { FieldComponent, FilterComponent, readme, spec } = this.props;
		const { readmeIsVisible } = this.state;

		return (
			<div className="fx-page">
				<div className="fx-page__header">
					<div className="fx-page__header__title">{spec.label}</div>
					{!!readme && (
						<button
							className="fx-page__header__button mega-octicon octicon-file-text"
							onClick={() => this.setState({ readmeIsVisible: !readmeIsVisible })}
							title={readmeIsVisible ? 'Hide Readme' : 'Show Readme'}
							type="button"
						/>
					)}
				</div>
				<div className="fx-page__content">
					<Row>
						<Col>
							<div className="fx-page__content__inner">
								<div className="fx-page__field">
									<Row>
										<Col width={readmeIsVisible ? 300 : null} style={{ minWidth: 300, maxWidth: 640 }}>
											<FieldComponent
												{...spec}
												onChange={this.onFieldChange}
												value={this.state.value}
											/>
										</Col>
										<Col>
											<div style={{ marginLeft: 30, marginTop: 26 }}>
												<Domify
													className="Domify"
													value={{ value: this.state.value }}
												/>
											</div>
										</Col>
									</Row>
								</div>
								<div className="fx-page__filter">
									<div className="fx-page__filter__title">Filter</div>
									<Row>
										<Col width={300}>
											<FilterComponent
												field={spec}
												filter={this.state.filter}
												onChange={this.onFilterChange}
											/>
										</Col>
										<Col>
											<div style={{ marginLeft: 30 }}>
												<Domify
													className="Domify"
													value={this.state.filter}
												/>
											</div>
										</Col>
									</Row>
								</div>
							</div>
						</Col>
						{!!readmeIsVisible && (
							<Col width={380}>
								<Markdown
									className="Markdown"
									source={readme}
								/>
							</Col>
						)}
					</Row>
				</div>
			</div>
		);
	},
});

const STUB_README = `
# Boolean Field

Stores a \`Boolean\` in the model.

## Methods

### \`format\`

Returns the string \`"true"\` or \`"false"\`.

### \`updateItem\`

Because \`FormData\` can only submit \`String\` values, and HTML Forms won't submit fields at all when checkbox inputs are not checked, there are a few unusual behaviours when updating Boolean fields:

* The stored value is always updated, even when \`undefined\` is provided
* Any falsy value, including \`undefined\`, \`null\`, \`false\`, \`""\` and \`0\` will store \`false\`
* The string \`"false"\` will store \`false\`
* Any other truthy string will store \`true\`
* Any truthy number will store \`true\`
* The boolean \`true\` will store \`true\`

There is no way to use \`updateItem\` to remove Boolean field values from the item.

### \`validateInput\`

Ensures the value can be interpreted using the rules above. Other complex values (objects that aren't null, dates, arrays, etc) are not valid input.

### \`validateRequiredInput\`

Ensures the value matches one of the rules above that will store \`true\`
`;

module.exports = ExplorerFieldType;

@@ -3534,1100 +3534,8 @@
 );%0A%0A
-const STUB_README = %60%0A# Boolean Field%0A%0AStores a %5C%60Boolean%5C%60 in the model.%0A%0A## Methods%0A%0A### %5C%60format%5C%60%0A%0AReturns the string %5C%60%22true%22%5C%60 or %5C%60%22false%22%5C%60.%0A%0A### %5C%60updateItem%5C%60%0A%0ABecause %5C%60FormData%5C%60 can only submit %5C%60String%5C%60 values, and HTML Forms won't submit fields at all when checkbox inputs are not checked, there are a few unusual behaviours when updating Boolean fields:%0A%0A* The stored value is always updated, even when %5C%60undefined%5C%60 is provided%0A* Any falsy value, including %5C%60undefined%5C%60, %5C%60null%5C%60, %5C%60false%5C%60, %5C%60%22%22%5C%60 and %5C%600%5C%60 will store %5C%60false%5C%60%0A* The string %5C%60%22false%22%5C%60 will store %5C%60false%5C%60%0A* Any other truthy string will store %5C%60true%5C%60%0A* Any truthy number will store %5C%60true%5C%60%0A* The boolean %5C%60true%5C%60 will store %5C%60true%5C%60%0A%0AThere is no way to use %5C%60updateItem%5C%60 to remove Boolean field values from the item.%0A%0A### %5C%60validateInput%5C%60%0A%0AEnsures the value can be interpreted using the rules above. Other complex values (objects that aren't null, dates, arrays, etc) are not valid input.%0A%0A### %5C%60validateRequiredInput%5C%60%0A%0AEnsures the value matches one of the rules above that will store %5C%60true%5C%60%0A%60;%0A%0A
 modu

remove stub readme