import React, { Component, useState, useEffect } from "react";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";
import "./Automations.css";

import {
  Segment,
  Grid,
  Icon,
  Header,
  Input,
  Button,
  List,
  Dropdown,
  Form,
  Divider,
  Checkbox,
  Menu,
} from "semantic-ui-react";

const operands = [
  { key: "EQUAL", text: "=", value: "EQUAL" },
  {
    key: "GREATER_EQUAL",
    text: "\u2265",
    value: "GREATER_EQUAL",
  },
  {
    key: "GREATER",
    text: ">",
    value: "GREATER",
  },
  {
    key: "LESS_EQUAL",
    text: "\u2264",
    value: "LESS_EQUAL",
  },
  {
    key: "LESS",
    text: "<",
    value: "LESS",
  },
];

const deviceStateOptions = [
  { key: "off", text: "off", value: false },
  { key: "on", text: "on", value: true },
];

const CreateTrigger = (props) => {
  const [activeOperand, setActiveOperand] = useState(true);
  const admitedDevices = ["sensor", "regularLight", "dimmableLight"]; // TODO Complete this list
  const deviceList = props.devices
    .map((device) => {
      return {
        key: device.id,
        text: device.name,
        value: device.id,
        kind: device.kind,
      };
    })
    .filter((e) => admitedDevices.includes(e.kind));

  const onChange = (e, val) => {
    props.inputChange(val);
    if (
      props.devices.filter((d) => d.id === val.value)[0].hasOwnProperty("on")
    ) {
      setActiveOperand(false);
    } else {
      setActiveOperand(true);
    }
  };

  return (
    <List.Item>
      <List.Content>
        <Form>
          <Form.Group>
            <Form.Field inline width={7}>
              <Dropdown
                onChange={onChange}
                name="device"
                search
                selection
                options={deviceList}
                placeholder="Device"
              />
            </Form.Field>
            {activeOperand ? (
              <React.Fragment>
                <Form.Field inline width={2}>
                  <Dropdown
                    onChange={(e, val) => props.inputChange(val)}
                    name="operand"
                    compact
                    selection
                    options={operands}
                  />
                </Form.Field>
                <Form.Field inline width={7}>
                  <Input
                    onChange={(e, val) => props.inputChange(val)}
                    name="value"
                    type="number"
                    placeholder="Value"
                  />
                </Form.Field>
              </React.Fragment>
            ) : (
              <Form.Field inline width={7}>
                <Dropdown
                  onChange={(e, val) => props.inputChange(val)}
                  placeholder="State"
                  name="value"
                  compact
                  selection
                  options={deviceStateOptions}
                />
              </Form.Field>
            )}
          </Form.Group>
        </Form>
      </List.Content>
    </List.Item>
  );
};

const SceneItem = (props) => {
  let position = props.order.indexOf(props.scene.id);
  return (
    <List.Item>
      <List.Header>
        <Grid textAlign="center">
          <Grid.Row>
            <Grid.Column width={4}>
              <Checkbox
                toggle
                onChange={(e, val) =>
                  props.orderScenes(props.scene.id, val.checked)
                }
                checked={position + 1 > 0}
              />
            </Grid.Column>
            <Grid.Column width={8}>
              <h3>{props.scene.name}</h3>
            </Grid.Column>
            <Grid.Column width={4}>
              <h3>{position !== -1 ? "# " + (position + 1) : ""}</h3>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </List.Header>
    </List.Item>
  );
};

const Trigger = ({ deviceName, trigger, onRemove, index }) => {
  const { operand, value } = trigger;
  let symbol;
  if (operand) {
    symbol = operands.filter((opt) => opt.key === operand)[0].text;
  }
  return (
    <List.Item className="trigger-item">
      <Menu compact>
        <Menu.Item as="span">{deviceName}</Menu.Item>
        {operand ? <Menu.Item as="span">{symbol}</Menu.Item> : ""}
        <Menu.Item as="span">
          {operand ? value : value ? "on" : "off"}
        </Menu.Item>
      </Menu>
      <Icon
        as={"i"}
        onClick={() => onRemove(index)}
        className="remove-icon"
        name="remove"
      />
    </List.Item>
  );
};

export const CreateAutomation = (props) => {
  const [triggerList, setTrigger] = useState([]);
  const [order, setOrder] = useState([]);
  const [stateScenes, setScenes] = useState(props.scenes);
  const [automationName, setautomationName] = useState("New Automation");
  const [editName, setEditName] = useState(false);
  const [newTrigger, setNewTrigger] = useState({});

  useEffect(() => {
    setScenes(props.scenes);
  }, [props]);

  const _checkNewTrigger = (trigger) => {
    const auxDevice = props.devices.filter((d) => d.id === trigger.device)[0];
    if (auxDevice && auxDevice.hasOwnProperty("on")) {
      if (!trigger.device || !trigger.value == null) {
        return {
          result: false,
          message: "There are missing fields!",
        };
      }
    } else {
      if (!trigger.device || !trigger.operand || !trigger.value) {
        return {
          result: false,
          message: "There are missing fields",
        };
      }
    }
    const result = !triggerList.some(
      (t) => t.device === trigger.device && t.operand === trigger.operand
    );
    return {
      result: result,
      message: result
        ? ""
        : "You have already created a trigger for this device with the same conditions",
    };
  };
  const addTrigger = () => {
    const { result, message } = _checkNewTrigger(newTrigger);
    const auxTrigger = newTrigger;
    if (result) {
      if (
        props.devices
          .filter((d) => d.id === newTrigger.device)[0]
          .hasOwnProperty("on")
      ) {
        delete auxTrigger.operand;
      }
      setTrigger((prevList) => [...prevList, auxTrigger]);
    } else {
      alert(message);
    }
  };

  const removeTrigger = (index) => {
    setTrigger((prevList) => prevList.filter((t, i) => i !== index));
  };

  // This gets triggered when the devices dropdown changes the value.
  const onInputChange = (val) => {
    setNewTrigger({ ...newTrigger, [val.name]: val.value });
  };
  const onChangeName = (e, val) => setautomationName(val.value);

  const orderScenes = (id, checked) => {
    if (checked) {
      setOrder((prevList) => [...prevList, id]);
    } else {
      setOrder((prevList) => prevList.filter((e) => e !== id));
    }
  };
  const searchScenes = (e, { value }) => {
    if (value.length > 0) {
      setScenes((prevScenes) => {
        return stateScenes.filter((e) => {
          return e.name.includes(value);
        });
      });
    } else {
      setScenes(props.scenes);
    }
  };

  const _generateKey = (trigger) => {
    if (trigger.hasOwnProperty("operand")) {
      return trigger.device + trigger.operand + trigger.value;
    }
    return trigger.device + trigger.value;
  };

  /*const checkBeforeSave = () => {
    if (automationName.length <= 0) {
      alert("Give a name to the automation");
      return false;
    }
    if (triggerList.length <= 0) {
      alert("You have to create a trigger");
      return false;
    }
    if (order.length <= 0) {
      alert("You need at least one active scene");
      return false;
    }
    return true;
  };*/

  const saveAutomation = () => {
    //if(checkBeforeSave()){
    const automation = {
      name: automationName,
    };
    props.save({ automation, triggerList, order });
    //}
  };

  return (
    <React.Fragment>
      <Header style={{ display: "inline", marginRight: "1rem" }}>
        {editName ? (
          <Input
            focus
            transparent
            placeholder="New automation name..."
            onChange={onChangeName}
          />
        ) : (
          automationName
        )}
      </Header>

      <Button
        onClick={() => setEditName((prev) => !prev)}
        style={{ display: "inline" }}
        circular
        size="small"
        icon={editName ? "save" : "edit"}
      />

      <Segment placeholder className="segment-automations">
        <Grid columns={2} stackable textAlign="center">
          <Divider vertical />
          <Grid.Row verticalAlign="middle">
            <Grid.Column>
              <Header>Create Triggers</Header>
              <List divided relaxed>
                {triggerList.length > 0 &&
                  triggerList.map((trigger, i) => {
                    const deviceName = props.devices.filter(
                      (d) => d.id === trigger.device
                    )[0].name;
                    const key = _generateKey(trigger);
                    return (
                      <Trigger
                        key={key}
                        index={i}
                        deviceName={deviceName}
                        trigger={trigger}
                        onRemove={removeTrigger}
                      />
                    );
                  })}
                <CreateTrigger
                  devices={props.devices}
                  inputChange={onInputChange}
                />
              </List>
              <Button
                onClick={addTrigger}
                circular
                icon="add"
                color="blue"
                size="huge"
              />
            </Grid.Column>
            <Grid.Column>
              {props.scenes.length > 0 ? (
                <React.Fragment>
                  <Header>Activate Scenes</Header>
                  <Input
                    icon="search"
                    placeholder="Search..."
                    fluid
                    onChange={searchScenes}
                  />
                  <Divider horizontal />
                  <List divided relaxed>
                    {stateScenes.map((scene) => (
                      <SceneItem
                        key={scene.id}
                        scene={scene}
                        order={order}
                        orderScenes={orderScenes}
                      />
                    ))}
                  </List>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <Header icon>
                    <Icon name="world" />
                  </Header>
                  <Button primary>Create Scene</Button>
                </React.Fragment>
              )}
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Segment>
      <Grid>
        <Grid.Row>
          <Grid.Column style={{ marginRight: "1rem" }}>
            <Button onClick={() => saveAutomation()} color="green">
              SAVE
            </Button>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    </React.Fragment>
  );
};

const Automation = ({ automation, devices, scenes, removeAutomation }) => {
  const { triggers } = automation;
  const scenePriorities = automation.scenes;
  const getOperator = (operand) =>
    operands.filter((o) => o.key === operand)[0].text;

  return (
    <React.Fragment>
      <Header style={{ display: "inline", marginRight: "1rem" }}>
        {automation.name}
      </Header>
      <Button
        style={{ display: "inline" }}
        circular
        size="small"
        icon={"edit"}
      />
      <Button
        style={{ display: "inline" }}
        circular
        onClick={() => removeAutomation(automation.id)}
        color="red"
        size="small"
        icon={"trash alternate outline"}
      />
      <Segment placeholder>
        <Grid columns={2} stackable textAlign="center">
          <Divider vertical></Divider>
          <Grid.Row verticalAlign="middle">
            <Grid.Column>
              <Header>Triggers</Header>
              <List divided relaxed>
                {triggers !== undefined &&
                  triggers.map((trigger) => {
                    const device = devices.filter(
                      (d) => d.id === trigger.deviceId
                    )[0];
                    return (
                      <Menu key={trigger.id} compact>
                        <Menu.Item as="span">
                          {device.name}{" "}
                          {trigger.operator
                            ? getOperator(trigger.operator) +
                              " " +
                              trigger.range
                            : trigger.value
                            ? " - on"
                            : " - off"}
                        </Menu.Item>
                      </Menu>
                    );
                  })}
              </List>
            </Grid.Column>
            <Grid.Column>
              <Header>Scenes</Header>
              <List divided relaxed>
                {scenePriorities !== undefined &&
                  scenePriorities.map((sp) => {
                    const sceneData = scenes.filter(
                      (s) => s.id === sp.sceneId
                    )[0];
                    return (
                      <Menu key={sceneData.id} compact>
                        <Menu.Item as="span">{sceneData.name}</Menu.Item>
                      </Menu>
                    );
                  })}
              </List>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Segment>
    </React.Fragment>
  );
};

class AutomationsPanel extends Component {
  constructor(props) {
    super(props);
    this.state = { openModal: false };
    this.getDevices();
    this.getScenes();
    this.getAutomations();
  }

  getScenes() {
    this.props.fetchAllScenes().catch(console.error);
  }

  getDevices() {
    this.props
      .fetchDevices()
      .catch((err) => console.error(`error fetching devices:`, err));
  }

  getAutomations() {
    this.props
      .fetchAutomations()
      .catch((err) => console.error(`error fetching automations:`, err));
  }

  removeAutomation = (id) => {
    this.props
      .deleteAutomation(id)
      .catch((err) => console.error(`error removing automation ${id}:`, err));
  };

  render() {
    return (
      <Grid style={{ marginTop: "3rem" }}>
        <Grid.Row>
          <Grid.Column textAlign="center" width={16}>
            {!this.state.openModal ? (
              <List>
                <CreateAutomation
                  save={this.props.saveAutomation}
                  scenes={this.props.scenes}
                  devices={this.props.devices}
                />
              </List>
            ) : (
              <Button color="green">CREATE AUTOMATION</Button>
            )}
          </Grid.Column>
        </Grid.Row>
        <Grid.Row>
          {this.props.automations.map((automation, i) => {
            console.log(23, automation, i, this.props.automations);
            return (
              <Grid.Column key={i} width={8} style={{ margin: "2rem 0" }}>
                <Automation
                  removeAutomation={this.removeAutomation}
                  scenes={this.props.scenes}
                  devices={this.props.devices}
                  automation={automation}
                />
              </Grid.Column>
            );
          })}
        </Grid.Row>
      </Grid>
    );
  }
}

const mapStateToProps = (state, _) => ({
  activeRoom: state.active.activeRoom,
  activeTab: state.active.activeTab,
  get scenes() {
    return Object.values(state.scenes);
  },
  get devices() {
    return Object.values(state.devices);
  },
  get automations() {
    console.log(state.automations);
    return Object.values(state.automations);
  },
});
const AutomationsPanelContainer = connect(
  mapStateToProps,
  RemoteService
)(AutomationsPanel);
export default AutomationsPanelContainer;