import { Fragment } from 'inferno';
import { act } from '../byond';
import { Box, Button, LabeledList, Section, Icon } from '../components';

export const ImplantChair = props => {
  const { state } = props;
  const { config, data } = state;
  const { ref } = config;
  return (
  <Fragment>
    <Section title="Occupant Information">
      <LabeledList>
        <LabeledList.item label="Name">
          {data.occupant.name ? data.occupant.name : "No Occupant"}
        </LabeledList.item>
        {!!data.occupied && (
          <LabeledList.item label="Status">
            {data.occupant.stat === 0 ? "Conscious" : data.occupant.stat === 1 ? "Unconcious" : "Dead"}
          </LabeledList.item>
        )}
      </LabeledList>
      <Section title="Door">
        <Button
          icon={data.open ? "unlock" : "lock"}
          onClick={() => act(ref, 'door')}
          content={data.open ? "Open" : "Closed"} />
        <Section title="Uses">
          {data.ready_implants}
        </Section>
      </Section>
      <Section title="Activate">
        <Button
          onClick={() => act(ref, 'implant')}
          content={data.ready ? (data.special_name ? data.special_name : "Implant") : "Recharging"} />
        {!!data.replenishing && (
          <Icon
            name="cog"
            spin />
        )}
      </Section>
    </Section>
  </Fragment>
  );
};