// @flow
import React from 'react';
import ClassNames from 'classnames';

import type {DisplayType} from '../Display';

type Props = {
  updateDisplaySize: (width: number, height: number) => void,
  displayedImageDatas: ImageData[],
  display: DisplayType,
};

type State = {
  widthString: string,
  heightString: string,
  error: boolean,
};

export default class DisplayManage extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    const {width, height} = this.props.display;
    this.state = {
      widthString: String(width),
      heightString: String(height),
      error: false,
    };
  }
  render() {
    const {updateDisplaySize, displayedImageDatas} = this.props;
    return (
      <div className="display-manage">
        <button
          data-test="fit-max-view-layer"
          onClick={() => {
            if (displayedImageDatas.length === 0) return;
            const maxWidth = Math.max(...displayedImageDatas.map(i => i.width));
            const maxHeight = Math.max(
              ...displayedImageDatas.map(i => i.height)
            );
            updateDisplaySize(maxWidth, maxHeight);
          }}
        >
          キャンバスをレイヤーの最大値に合わせる
        </button>
        {['widthString', 'heightString'].map(value => (
          <span key={value}>
            <input
              type="number"
              className={ClassNames({'error-message': this.state.error})}
              value={this.state[value]}
              onChange={e => {
                this.setState({
                  [value]: e.currentTarget.value,
                  error: false,
                });
              }}
            />px
          </span>
        ))}
        <button
          data-test="specify-display-size"
          onClick={() => {
            let error = false;
            const {widthString, heightString} = this.state;
            if (!widthString || !heightString) error = true;
            const width = Number(widthString);
            const height = Number(heightString);
            if (isNaN(width) || isNaN(height)) error = true;
            if (width <= 0 || height <= 0) error = true;
            if (width >= 10000 || height >= 10000) error = true;
            if (error) {
              this.setState({error: true});
              return;
            }
            updateDisplaySize(width, height);
          }}
        >
          リサイズ
        </button>
      </div>
    );
  }
}

@@ -2078,32 +2078,65 @@
 ) error = true;%0A
+            // TODO: %E3%83%9E%E3%82%B8%E3%83%83%E3%82%AF%E3%83%8A%E3%83%B3%E3%83%90%E3%83%BC%E3%81%AE%E5%89%8A%E9%99%A4%0A
             if (

add TODO