import * as React from 'react';
import { DetailsRow, IDetailsRowBaseProps } from 'office-ui-fabric-react';
import OpenRow from '../public-child/OpenRow';

interface DetailsProps {
    detailsProps: IDetailsRowBaseProps;
}

interface DetailsState {
    isExpand: boolean;
}

class Details extends React.Component<DetailsProps, DetailsState> {

    constructor(props: DetailsProps) {
        super(props);
        this.state = { isExpand: false };
    }

    render(): React.ReactNode {
        const { detailsProps } = this.props;
        const { isExpand } = this.state;
        return (
            <div>
                <div onClick={(): void => {
                    this.setState(() => ({ isExpand: !isExpand }));
                }}>
                    <DetailsRow {...detailsProps} />
                </div>
                {isExpand && <OpenRow trialId={detailsProps.item.id} />}
            </div>
        );
    }
}

export default Details;