import * as _ from "lodash";
import * as React from "react";

import { Button, ButtonSize, ButtonType, IButtonProps } from "../Button";
import { Input, IInputProps } from "../Input";
import { Select, ISelectProps } from "../Select";
import { IRevealProps, Reveal, RevealType } from "../Reveal";

export interface IFormProps {
  inputs?: IInputProps[];
  selects?: ISelectProps[];
  submit: Partial<IButtonProps>;
  onSubmit?: (data: object) => void;
  onCancel?: () => void;
  className?: string;
  reveal?: Partial<IRevealProps>;
}

interface IFormState {
  data: object;
}

const defaultFormState: IFormState = {
  data: {},
};

export class Form extends React.PureComponent<IFormProps, IFormState> {
  public state: IFormState = defaultFormState;

  public render() {
    return (
      <form className="form" onSubmit={(e) => {
        e.preventDefault();
        this.props.onSubmit(this.state.data);
      }}>
        <Reveal
          id="form"
          type={RevealType.SlideRightToLeft}
          mount={true}
          className={this.props.className}
          {...this.props.reveal}
      >
          {this.props.inputs && this.props.inputs.map((input, index) => (
            <div className="form__input" key={index}>
              <Input {...input} onChange={this.handleChange} />
            </div>
          ))}

          {this.props.selects && this.props.selects.map((select: ISelectProps, index) => (
            <Select {...select} key={index} onChange={this.handleChange} />
          ))}

          <Button type={ButtonType.Primary} size={ButtonSize.Large} className="form__submit" htmlType="submit" {...this.props.submit} />
        </Reveal>
        </form>
    );
  }

  private handleChange = (id: string, data: string | number | object) => {
    this.setState({
      data: {
        ...this.state.data,
        [id]: data,
      },
    });
  }
}