import React from "react";
import { Dropdown as MuiDropdown } from "../../src/components/ui/DropdownMui";
import { Checkbox, FormControlLabel, FormGroup, MenuItem, Stack, TextField } from "@mui/material";
import { AddButton } from "../../src/components/ui/buttons/AddButton";
import { RemoveButton } from "../../src/components/ui/buttons/RemoveButton";
import { KeyValueForm } from "../../src/components/recorder/KeyValueForm";
import { WarningText } from "../../src/components/ui/texts";

interface DisplayConditionSettingsProps {
  whereProp: string;
  additionalSettings: string;
  setAdditionalSettings: (value: any) => void;
  newValue: any;
  setNewValue: (value: any) => void;
  keyValueFormRef: React.RefObject<{ getObject: () => object }>;
  whereKeys: string[];
  checked: boolean[];
  setChecked: (value: boolean[]) => void;
}

export const DisplayConditionSettings = (
  { whereProp, setAdditionalSettings, additionalSettings,
    setNewValue, newValue, keyValueFormRef, whereKeys, checked, setChecked }
    : DisplayConditionSettingsProps) => {
  switch (whereProp) {
    case 'url':
      return (
        <React.Fragment>
          <MuiDropdown
            id="url"
            label="type"
            value={additionalSettings}
            handleSelect={(e) => setAdditionalSettings(e.target.value)}>
            <MenuItem value="string">string</MenuItem>
            <MenuItem value="regex">regex</MenuItem>
          </MuiDropdown>
          {additionalSettings ? <TextField
            size='small'
            type="string"
            onChange={(e) => setNewValue(e.target.value)}
            value={newValue}
          /> : null}
        </React.Fragment>
      )
    case 'selectors':
      return (
        <React.Fragment>
          <Stack direction='column' spacing={2}>
            {
              newValue.map((selector: string, index: number) => {
                return <TextField
                  key={`whereProp-selector-${index}`}
                  size='small'
                  type="string"
                  onChange={(e) => setNewValue([
                    ...newValue.slice(0, index),
                    e.target.value,
                    ...newValue.slice(index + 1)
                  ])} />
              })
            }
          </Stack>
          <AddButton handleClick={() => setNewValue([...newValue, ''])} />
          <RemoveButton handleClick={() => {
            const arr = newValue;
            arr.splice(-1);
            setNewValue([...arr]);
          }} />
        </React.Fragment>
      )
    case 'cookies':
      return <KeyValueForm ref={keyValueFormRef} />
    case 'before':
      return <TextField
        label='pair id'
        size='small'
        type="string"
        onChange={(e) => setNewValue(e.target.value)}
      />
    case 'after':
      return <TextField
        label='pair id'
        size='small'
        type="string"
        onChange={(e) => setNewValue(e.target.value)}
      />
    case 'boolean':
      return (
        <React.Fragment>
          <MuiDropdown
            id="boolean"
            label="operator"
            value={additionalSettings}
            handleSelect={(e) => setAdditionalSettings(e.target.value)}>
            <MenuItem value="and">and</MenuItem>
            <MenuItem value="or">or</MenuItem>
          </MuiDropdown>
          <FormGroup>
            {
              whereKeys.map((key: string, index: number) => {
                return (
                  <FormControlLabel control={
                    <Checkbox
                      checked={checked[index]}
                      onChange={() => setChecked([
                        ...checked.slice(0, index),
                        !checked[index],
                        ...checked.slice(index + 1)
                      ])}
                      key={`checkbox-${key}-${index}`}
                    />
                  } label={key} key={`control-label-form-${key}-${index}`} />
                )
              })
            }
          </FormGroup>
          <WarningText>
            Choose at least 2 where conditions. Nesting of boolean operators
            is possible by adding more conditions.
          </WarningText>
        </React.Fragment>
      )
    default:
      return null;
  }
}