import * as React from "react";
import { FieldArray } from "formik";
import styled from "styled-components";

import { Button, Icon } from "../atoms";
import Tabs from "../../components/tabs";
import JSONEditor from "../JSONEditor";
import { FieldWrapper, Group, Input } from "./index";
import { isValidJSON } from "../../services/helper";
import { IMockResponseRaw } from "../../interface/mock";

const StyledTabs = styled(Tabs)`
  margin-left: 4px;
  div {
    padding: 4px 8px;
  }
`;

const ResponseWrapper = styled.div`
  position: relative;
  height: 100%;
`;

const Select = styled.select`
  position: absolute;
  z-index: 233;
  right: 0;
`;

const HeaderWrapper = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  ${Input} {
    margin-right: 4px;
    flex-grow: 2;
    &:first-child {
      flex-grow: 1;
    }
  }
  width: 100%;
`;

interface IProps {
  mock?: IMockResponseRaw;
  jsonEditor?: {
    className?: string;
    style?: React.CSSProperties;
  };
  values: any;
  errors: any;
  handleChange: any;
  handleBlur: any;
  setFieldValue: any;
  setFieldError: any;
}

const Response = ({
  mock,
  jsonEditor,
  values,
  errors,
  setFieldValue,
  setFieldError,
  handleChange,
  handleBlur,
}: IProps) => {
  const [tab, setTab] = React.useState(0);

  const [responseType, setResponseType] = React.useState(
    !!mock?.response && isValidJSON(mock.response).error ? "TEXT" : "JSON"
  );

  return (
    <FieldWrapper
      className="mock-create-response h-100"
      style={{ height: "100%" }}
    >
      <Group>
        <StyledTabs
          selected={tab}
          tabs={["Body", "Headers"]}
          onChange={(selected) => {
            if (selected === 1 && values.headers.length === 0) {
              setFieldValue("headers", [{ name: "", value: "" }]);
            }

            if (
              selected === 0 &&
              values.headers.length &&
              !values.headers[values.headers.length - 1].name &&
              !values.headers[values.headers.length - 1].value
            ) {
              setFieldValue("headers", []);
            }
            setTab(selected);
          }}
        />
      </Group>
      {tab === 0 && (
        <ResponseWrapper>
          <Select
            onChange={(event) => setResponseType(event.target.value)}
            value={responseType}
          >
            <option value="JSON">JSON</option>
            <option value="TEXT">Text</option>
          </Select>
          {responseType === "JSON" ? (
            <JSONEditor
              name="response"
              value={values.response}
              onChange={(v) => setFieldValue("response", v)}
              onError={(v) => setFieldError("response", v)}
              error={!!errors.response}
              {...jsonEditor}
            />
          ) : (
            <Input
              style={{ height: "100%", width: "100%" }}
              as="textarea"
              name="response"
              value={values.response}
              onChange={handleChange}
              onBlur={handleBlur}
            />
          )}
        </ResponseWrapper>
      )}
      {tab === 1 && (
        <FieldArray
          name="headers"
          render={(arrayHelpers) => {
            const disabled = values.headers.some(
              (header) => !header.name || !header.value
            );
            return (
              <>
                {values.headers.length > 0 && (
                  <div style={{ flexGrow: 2, overflow: "scroll" }}>
                    {values.headers.map((header, index) => (
                      <HeaderWrapper className="mock-create-header">
                        <Input
                          marginRight
                          name={`headers.${index}.name`}
                          autoFocus
                        ></Input>
                        <Input
                          marginRight
                          name={`headers.${index}.value`}
                        ></Input>
                        <Icon
                          onClick={() => {
                            arrayHelpers.remove(index);
                          }}
                        >
                          close
                        </Icon>
                      </HeaderWrapper>
                    ))}
                  </div>
                )}
                <Button
                  style={{ height: 24, fontSize: 12 }}
                  transparent
                  color="primary"
                  disabled={disabled}
                  onClick={() => arrayHelpers.push({ name: "", value: "" })}
                >
                  Add Header
                </Button>
              </>
            );
          }}
        />
      )}
    </FieldWrapper>
  );
};

export default Response;