import React from 'react';
import _ from 'lodash';

import { Segment,
    Header,
    Icon,
    Button,
    Table,
    Form,
    Divider,
    Label } from 'semantic-ui-react'

const ANY_VALUE = -999;

export default class WaxIdBitField extends React.Component {
    render() {
        let bitField = this.props.job.toolPathBitFieldSnapshot;

        const mostRecentWaxIdSnapshot = (this.props.job.waxIdSnapshots && this.props.job.waxIdSnapshots.length > 0) ? _.last(this.props.job.waxIdSnapshots) : undefined;

        if (bitField && bitField.bits && bitField.bits.length === 20) {
            console.log(bitField && bitField.length);
            let bitFieldLeft = null;
            let bitFieldRight = null;
            const waxIds = <>{(this.props.job.toolPathSnapshots) ? this.props.job.toolPathSnapshots.map(toolPathSnapshot => <Label color="blue">{toolPathSnapshot.waxId}</Label>) : null}</>

            const echoBit = bit => bit === "1" ? "⚫" : "🔵"
            bitFieldLeft = 
                <div>
                    {bitField.bits.slice(0, 5).map(echoBit).join(" ")}<br />
                    {bitField.bits.slice(5, 10).map(echoBit).join(" ")}
                </div>;
            bitFieldRight =
                <div>
                    {bitField.bits.slice(10, 15).map(echoBit).join(" ")}<br />
                    {bitField.bits.slice(15, 20).map(echoBit).join(" ")}
                </div>;

            return (
                <div>
                    WaxIds: {waxIds}<br />
                    <Table inverted color="blue">
                        <Table.Header>
                            <Table.Row>
                                <Table.HeaderCell collapsing>Left Eye</Table.HeaderCell>
                                <Table.HeaderCell collapsing>Right Eye</Table.HeaderCell>
                            </Table.Row>
                        </Table.Header>
                        <Table.Row disabled={false}>
                            <Table.Cell collapsing>{bitFieldLeft}</Table.Cell>
                            <Table.Cell collapsing>{bitFieldRight}</Table.Cell>
                        </Table.Row>
                    </Table>
                </div>
            );
        } else {
            return null;
        }
    }
}