import React from "react";
import Chip from "@mui/material/Chip";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import { Stack, Tooltip } from "@mui/material";

export const SelectableAndEditableField = (props: any) => {
  const options = props?.options;
  const defaultValue = props?.defaultValue;
  const setValues = props?.updateValue;
  const noOptions = props?.noOptions;
  const placeHolder = props?.placeHolder;
  const fetch = props?.fetch ?? false;

  const FetchValue = (values: any) => {
    if (fetch) setValues(values);
  };

  return (
    <Stack style={{ width: "100%" }}>
      <Autocomplete
        style={{ width: "100%" }}
        className={"autoComplete-container"}
        multiple
        id="tags-filled"
        onClose={(e) => {}}
        options={options.map((option) => option)}
        filterSelectedOptions
        onChange={(e: any) => {
          if (e.target.dataset.testid === "CloseIcon") {
            if (fetch) {
              FetchValue([]);
            } else {
              setValues([]);
            }
          }

          if (e.target.textContent) {
            if (fetch) {
              FetchValue([...defaultValue, e.target.textContent]);
            } else {
              setValues((prev: any) => {
                if (prev?.length) {
                  return [...prev, e.target.textContent];
                } else {
                  return [e.target.textContent];
                }
              });
            }
          }
        }}
        onInputChange={(event: any) => {
          if (event.key === "Enter") {
            if (fetch) {
              FetchValue([...defaultValue, event.target.value]);
            } else {
              setValues((prev) => {
                if (prev?.length) {
                  return [...prev, event.target.value];
                } else {
                  return [event.target.value];
                }
              });
            }
          }
        }}
        value={defaultValue}
        freeSolo
        renderTags={(value: string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <Tooltip title={option}>
              <Chip
                key={index}
                size="small"
                variant="outlined"
                label={option}
                {...getTagProps({ index })}
                onDelete={(e) => {
                  if (fetch) {
                    FetchValue(
                      defaultValue.filter((element: any) => element !== option)
                    );
                  } else {
                    setValues((prev) =>
                      prev.filter((element) => element !== option)
                    );
                  }
                }}
              />
            </Tooltip>
          ))
        }
        renderInput={(params) => (
          <TextField
            style={{ textTransform: "capitalize" }}
            {...params}
            variant="outlined"
            placeholder={
              noOptions
                ? placeHolder
                  ? placeHolder
                  : "Please Enter your types of business"
                : placeHolder
                ? placeHolder
                : "select or add new"
            }
            size="small"
          />
        )}
      />
    </Stack>
  );
};