import { computed } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc } from '../../../../fields/Doc';
import { BoolCast, NumCast, StrCast } from '../../../../fields/Types';
import { EditableView } from '../../EditableView';
import { DimUnit } from './CollectionMulticolumnView';

interface WidthLabelProps {
    layout: Doc;
    collectionDoc: Doc;
}

@observer
export default class WidthLabel extends React.Component<WidthLabelProps> {
    @computed
    private get contents() {
        const { layout } = this.props;
        const getUnit = () => StrCast(layout.dimUnit);
        const getMagnitude = () => String(+NumCast(layout.dimMagnitude).toFixed(3));
        return (
            <div className="label-wrapper">
                <EditableView
                    GetValue={getMagnitude}
                    SetValue={value => {
                        const converted = Number(value);
                        if (!isNaN(converted) && converted > 0) {
                            layout.dimMagnitude = converted;
                            return true;
                        }
                        return false;
                    }}
                    contents={getMagnitude()}
                />
                <EditableView
                    GetValue={getUnit}
                    SetValue={value => {
                        if (Object.values(DimUnit).includes(value)) {
                            layout.dimUnit = value;
                            return true;
                        }
                        return false;
                    }}
                    contents={getUnit()}
                />
            </div>
        );
    }

    render() {
        return BoolCast(this.props.collectionDoc.showWidthLabels) ? this.contents : null;
    }
}