import React from 'react';


class AssetManagement extends React.Component {
    constructor() {
        super();

        this.state = {
            newAssetName: 'Name',
            newAssetSE: 'SE',
            newAssetWarranty: 12,
        };
    }

    onNewAssetNameChange = target => {
        this.setState({
            newAssetName: target.value,
        });
    };

    onNewAssetSEChange = target => {
        this.setState({
            newAssetSE: target.value,
        });
    };

    onNewAssetWarrantyChange = target => {
        this.setState({
            newAssetWarranty: target.value,
        });
    };

    onCreateNewAssetClicked = () => {
        this.props.onCreateAsset({
            name: this.state.newAssetName,
            serial: this.state.newAssetSE,
            warranty_months: this.state.newAssetWarranty,
        });
    }


    render() {
        const userAssets = [];
        if (this.props.assets) {
            this.props.assets.forEach(asset => {
                userAssets.push(<div className="asset" key={asset.id}>
                    <span>#{asset.asset_tag}</span>
                    <span>{asset.name}</span>
                    <span>{asset.supplier ? asset.supplier.name : ''}</span>
                    <span>Expires: {asset.warranty_expires ? asset.warranty_expires.formatted : '-'}</span>
                    <div className="asset-delete" onClick={() => { this.props.onDeleteAsset(asset.id)}}>DELETE</div>
                </div>);
            });
        }

        return (<div className="asset-management">
            <div className="new-asset">
                <input className="new-asset-input" onChange={this.onNewAssetNameChange} value={this.state.newAssetName}/>
                <input className="new-asset-input" onChange={this.onNewAssetSEChange} value={this.state.newAssetSE}/>
                <input className="new-asset-input" type="number" onChange={this.onNewAssetWarrantyChange} value={this.state.newAssetWarranty}/>
                <button onClick={this.onCreateNewAssetClicked}>Create new</button>
            </div>
            <div className="assets">
                {userAssets}
            </div>
        </div>);
    }
}

export default AssetManagement;