import * as React from "react";
import { Button, Col, Row, Switch, Typography } from "antd";
import { CodeTriggerForm } from "./components/code_trigger_form";
import { observer } from "mobx-react-lite";
import { triggerStore } from "./logic/trigger_store";
import { FileTriggerForm } from "./components/file_trigger_form";
import { ReactComponent as DeleteIcon } from "../../../assets/icons/delete.svg";

const { Title } = Typography;

const Header = observer(() => {
  return (
    <Row style={{ justifyItems: "center", alignItems: "center" }}>
      <div style={{ height: "37px" }}>
        <Switch
          checked={triggerStore.getTriggerType()}
          onChange={() => triggerStore.setTriggerType()}
        />
      </div>
      <Title level={2}>
        Trigger editor: {triggerStore.getTriggerDescription()}
      </Title>
      <div style={{ width: "10px" }}></div>
      <Button onClick={() => triggerStore.saveResult()}>Save result</Button>
    </Row>
  );
});

const Bottom = observer(() => {
  return (
    <Col>
      {triggerStore.triggers.map((el) => {
        return (
          <Row
            style={{
              justifyContent: "center",
            }}
          >
            {el.value}
            <DeleteIcon onClick={() => triggerStore.deleteItem(el.id)} />
          </Row>
        );
      })}
    </Col>
  );
});

export const TriggerScreen: React.FunctionComponent = observer(() => {
  return (
    <>
      <main className="test">
        <Header />,
        {triggerStore.getTriggerType() ? (
          <>
            <FileTriggerForm />
          </>
        ) : (
          <>
            <CodeTriggerForm />
          </>
        )}
        <Bottom />
      </main>
    </>
  );
});