import React from "react";
import { ICollateral, IRepoAccount } from "../../../services/service-types/RepoAccountTypes";
import RepoAccountService from "../../../services/RepoAccountService";
import { Moment } from "moment";
import DateFormatting from "../../../shared/formatting/DateFormatting";
import DatePicker from 'react-datepicker';
import DateConversions from "../../../shared/conversions/DateConversions";
import "./NotableDates.css";

const cloneDeep = require('lodash.clonedeep');

interface INotableDatesProps {
    selectedAccount: IRepoAccount;
    saveRepoAccount: (repo: IRepoAccount) => any;
}

interface INotableDatesState {
    repoAccount: IRepoAccount;
    isOpen: boolean;
}

type IRepoAccountUpdater<T> = (repoAccount: IRepoAccount, value: T) => void;

class NotableDates extends React.Component<INotableDatesProps, INotableDatesState> {
    constructor(props: INotableDatesProps) {
        super(props);
        this.state = {
            repoAccount: cloneDeep(props.selectedAccount),
            isOpen: false
        }
    }

    private applyChange<T>(value: T, updater: IRepoAccountUpdater<T>) {
        const copiedAccount = cloneDeep(this.state.repoAccount);
        updater(copiedAccount, value);
        this.setState({
            repoAccount: copiedAccount,
        });
    }

    private handleDateChange(date: Date | null, updater: IRepoAccountUpdater<Moment | undefined>) {
        const momentDate = DateConversions.dateToMoment(date);
        this.applyChange(momentDate, updater);
    }

    toggleOpen = () => this.setState({ isOpen: !this.state.isOpen });

    private formatDate = (date: Moment | undefined = undefined): string => {
        return date ? DateFormatting.FormatMMDDYYYY(date) : "N/A";
    };

    private getRetitledDateString = (collaterals: ICollateral[]): string => {
        for (const collateral of collaterals) {
            if (collateral.retitledInLandmarkName) {
                return this.formatDate(collateral.retitledInLandmarkName);
            }
        }
        return this.formatDate();
    };

    private getRepoDate = (repoAccount: IRepoAccount): string => {
        return this.formatDate(RepoAccountService.GetLatestStatusChangeDate("REPO", repoAccount));
    };

    private editButton = () => {
        return (
            <button
                className="notable-dates-edit btn btn-info"
                onClick={this.toggleOpen}
                data-test="notable-dates-edit-retitled-date-btn"
            >
                Edit
            </button>
        );
    };

    render() {
        return (
            <div className="col-sm-4 card notable-dates ml">
                <h5>Notable Dates:</h5>
                <hr />
                <p><b>O4R:</b>
                    <span data-test="notable-dates-o4r-date"> {this.formatDate(this.props.selectedAccount.o4RDate)}</span>
                </p>
                <p><b>Repo:</b>
                    <span data-test="notable-dates-repo-date"> {this.getRepoDate(this.props.selectedAccount)}</span>
                </p>
                <p><b>Redemption Expired:</b>
                    <span data-test="notable-dates-redem-exp-date"> {this.formatDate(this.props.selectedAccount.redemptionExpiredDate)}
                    </span>
                    {this.state.isOpen ?
                        <div>
                            <div className="form-group">
                                <DatePicker
                                    className="form-control date-picker"
                                    placeholderText="mm/dd/yyyy"
                                    selected={DateConversions.momentToDate(this.state.repoAccount.redemptionExpiredDate)}
                                    onChange={(date) => this.handleDateChange(date, (a, v) => a.redemptionExpiredDate = v)}
                                    data-test={"notable-dates-redem-exp-date-picker"}
                                />
                            </div>
                            <div className="form-group">
                                <button
                                    className="form-control btn btn-info auction-panel-btn"
                                    onClick={() => { this.props.saveRepoAccount(this.state.repoAccount) }}
                                    data-test="notable-dates-redem-exp-submit-btn">
                                    Submit
                                </button>
                            </div>
                        </div>
                        : null}
                </p>
                <p><b>Retitled:</b>
                    <span data-test="notable-dates-retitled-date"> {this.getRetitledDateString(this.props.selectedAccount.collaterals)}</span>
                </p>
            </div>
        );
    }
}

export default NotableDates;