import moment from "moment";
import React from "react";
import FormInput, { FormInputType } from "../../../../components/form-input/FormInput";
import { IRepoCompany } from "../../../../reducers/RepoCompanyReducer";
import "./AdminRepoCompanyRow.css";

interface IRepoCompanyRowProps {
    repoCompany: IRepoCompany;
    putRepoCompany: (repoCompany: IRepoCompany) => any;
}

interface IRepoCompanyRowState {
    editedRepoCompany?: IRepoCompany;
}

class AdminRepoCompanyRow extends React.Component<IRepoCompanyRowProps, IRepoCompanyRowState> {

    constructor(props: IRepoCompanyRowProps) {
        super(props);
        this.state = {};

        this.applyIsActiveChange = this.applyIsActiveChange.bind(this);
    }

    componentDidUpdate(prevProps: IRepoCompanyRowProps, prevState: IRepoCompanyRowState) {
        if (prevState !== this.state) {
            return;
        }

        if (prevProps.repoCompany !== this.props.repoCompany) {
            this.setState({
                editedRepoCompany: undefined
            });
        }
    }

    applyChange(updater: (repoCompany: IRepoCompany) => any) {
        if (!this.state.editedRepoCompany) {
            return;
        }

        const copiedRepoCompany = {...this.state.editedRepoCompany};
        updater(copiedRepoCompany);
        this.setState({
            editedRepoCompany: copiedRepoCompany
        });
    }

    applyIsActiveChange(value: string) {
        const isActive = !!parseInt(value);
        const disabledDate = isActive ? undefined : moment();
        this.applyChange(repoCompany => repoCompany.disabledDate = disabledDate);
    }

    beginEditingRow() {
        this.setState({
            editedRepoCompany: {
                ...this.props.repoCompany
            }
        });
    }

    cancelEditingRow() {
        this.setState({
            editedRepoCompany: undefined
        });
    }

    hasStringFieldChanged(fieldExtraction: (repoCompany: IRepoCompany) => string | null | undefined) {
        const orig = fieldExtraction(this.props.repoCompany);
        const edited = this.state.editedRepoCompany ? fieldExtraction(this.state.editedRepoCompany) : undefined;
        return (orig || "") !== (edited || "");
    }

    isRepoCompanyAltered() {
        if (!this.state.editedRepoCompany) {
            return false;
        }

        return (
            this.props.repoCompany.name !== this.state.editedRepoCompany.name ||
            this.hasStringFieldChanged(repoCompany => repoCompany.email) ||
            this.props.repoCompany.referenceId !== this.state.editedRepoCompany.referenceId ||
            this.hasStringFieldChanged(repoCompany => repoCompany.address_Line_1) ||
            this.hasStringFieldChanged(repoCompany => repoCompany.address_Line_2) ||
            this.hasStringFieldChanged(repoCompany => repoCompany.city) ||
            this.hasStringFieldChanged(repoCompany => repoCompany.state) ||
            this.hasStringFieldChanged(repoCompany => repoCompany.zip) ||
            this.hasStringFieldChanged(repoCompany => repoCompany.country) ||
            this.hasStringFieldChanged(repoCompany => repoCompany.phone) ||
            this.hasStringFieldChanged(repoCompany => repoCompany.fax) ||
            !!this.props.repoCompany.disabledDate !== !!this.state.editedRepoCompany.disabledDate 
        );
    }

    isRowDisabled(): boolean {
        return !!this.props.repoCompany.disabledDate;
    }

    render() {
        if (this.state.editedRepoCompany) {
            const areStringInputsDisabled = !!this.state.editedRepoCompany.disabledDate;
            return (
                <tr className="admin-repo-company-row-form" data-test="input-version">
                    <td>
                        <FormInput
                            placeholder="Name"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.name}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.name = value)}
                            data-test="name-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="ReferenceId"
                            type={FormInputType.Number}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.referenceId}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.referenceId = value)}
                            data-test="referenceid-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="Email"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.email}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.email = value)}
                            data-test="email-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="Address #1"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.address_Line_1}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.address_Line_1 = value)}
                            data-test="addr-1-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="Address #2"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.address_Line_2}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.address_Line_2 = value)}
                            data-test="addr-2-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="City"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.city}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.city = value)}
                            data-test="city-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="State"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.state}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.state = value)}
                            data-test="state-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="ZIP"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.zip}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.zip = value)}
                            data-test="zip-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="Country"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.country}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.country = value)}
                            data-test="country-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="Phone"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.phone}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.phone = value)}
                            data-test="phone-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            placeholder="Fax"
                            type={FormInputType.Text}
                            disabled={areStringInputsDisabled}
                            value={this.state.editedRepoCompany.fax}
                            onChange={(value) => this.applyChange(repoCompany => repoCompany.fax = value)}
                            data-test="fax-field"
                        />
                    </td>
                    <td>
                        <FormInput
                            type={FormInputType.Selection}
                            value={!this.state.editedRepoCompany.disabledDate ? 1 : 0}
                            onChange={this.applyIsActiveChange}
                            data-test="is-active-field"
                            options={[
                                { value: 1, display: "Yes" },
                                { value: 0, display: "No" }
                            ]}
                        />
                    </td>
                    <td className="button-actions-column">
                        <button
                            type="button"
                            className="btn btn-success"
                            disabled={!this.isRepoCompanyAltered()}
                            onClick={() => this.props.putRepoCompany(this.state.editedRepoCompany!)}
                            data-test="save-row-btn"
                        >
                            <i className="fa fa-floppy-o" aria-hidden="true"/>
                        </button>
                        <button
                            type="button"
                            className="btn btn-warning"
                            onClick={() => this.cancelEditingRow()}
                            data-test="cancel-row-btn"
                        >
                            <i className="fa fa-ban" aria-hidden="true"/>
                        </button>
                    </td>
                </tr>
            );
        } else {
            return (
                <tr className={this.isRowDisabled() ? "disabled-repo-company-row" : ""} data-test="label-version">
                    <td><p>{this.props.repoCompany.name}</p></td>
                    <td>{this.props.repoCompany.referenceId || "-"}</td>
                    <td><p>{this.props.repoCompany.email}</p></td>
                    <td><p>{this.props.repoCompany.address_Line_1 || "-"}</p></td>
                    <td><p>{this.props.repoCompany.address_Line_2  || "-"}</p></td>
                    <td><p>{this.props.repoCompany.city  || "-"}</p></td>
                    <td><p>{this.props.repoCompany.state  || "-"}</p></td>
                    <td><p>{this.props.repoCompany.zip  || "-"}</p></td>
                    <td><p>{this.props.repoCompany.country  || "-"}</p></td>
                    <td><p>{this.props.repoCompany.phone  || "-"}</p></td>
                    <td><p>{this.props.repoCompany.fax  || "-"}</p></td>
                    <td><p>{!this.props.repoCompany.disabledDate ? "Yes" : "No"}</p></td>
                    <td className="button-actions-column">
                        <button
                            type="button"
                            className="btn btn-primary"
                            onClick={() => this.beginEditingRow()}
                            data-test="edit-row-btn"
                        >
                            <i className="fa fa-pencil" aria-hidden="true"/>
                        </button>
                    </td>
                </tr>
            );
        }
    }

}

export default AdminRepoCompanyRow;