import React from 'react';
import PropTypes from 'prop-types';
import { Delete } from '@mui/icons-material';

import { DEMAND_TAG_KEY_VALUE_TARGETING_TYPE } from '@/modules/marketplace/account/constants';

import { FormGroup, FormRow, FormRowItem } from '@/modules/@common/Form';
import StateSelect from '@/modules/@common/TagSelector/components/StateSelect/StateSelect';
import ChipInput from '@/modules/marketplace/common/ChipInput';
import { Autocomplete, IconButton, Stack, TextField, ToggleButton, ToggleButtonGroup } from '@/mui/components';

function KeyValue(props) {
  const handleOnChange = (newValue) => {
    props.onChange(props.id, newValue);
  };

  return (
    <FormGroup elevation={2}>
      <FormRow label={`Key-Value ${props.id + 1}`} multiline fullWidth>
        <Stack spacing={2} direction="row" fullWidth>
          <Autocomplete
            size="small"
            options={props.keyNamesOptions}
            optionValueKey="label"
            value={props.keyName}
            onChange={(event, keyName) => handleOnChange({ keyName })}
            onOpen={() => props.getKeyNamesOptions('')}
            renderInput={(params) => (
              <TextField
                {...params}
                placeholder="Key Name"
                onChange={(e) => {
                  props.getKeyNamesOptions(e.target.value);
                }}
              />
            )}
          />
          <StateSelect
            size="small"
            value={props.state !== 'EXCLUDE'}
            onChange={(state) => handleOnChange({ state: state ? 'INCLUDE' : 'EXCLUDE' })}
          />
          <FormRowItem itemsInRow={4} justifyContent="flex-end">
            <IconButton size="small" onClick={props.onDelete}>
              <Delete />
            </IconButton>
          </FormRowItem>
        </Stack>
        <Stack spacing={2} direction="row" fullWidth>
          <ToggleButtonGroup equalWidth size="small" color="primary" variant="outlined" value={props.type}>
            <ToggleButton
              value={DEMAND_TAG_KEY_VALUE_TARGETING_TYPE.value}
              onClick={() =>
                handleOnChange({
                  type: DEMAND_TAG_KEY_VALUE_TARGETING_TYPE.value,
                })
              }
            >
              Values
            </ToggleButton>
            <ToggleButton
              value={DEMAND_TAG_KEY_VALUE_TARGETING_TYPE.list}
              onClick={() =>
                handleOnChange({
                  type: DEMAND_TAG_KEY_VALUE_TARGETING_TYPE.list,
                })
              }
            >
              Value Lists
            </ToggleButton>
          </ToggleButtonGroup>
          {props.type === DEMAND_TAG_KEY_VALUE_TARGETING_TYPE.value && (
            <ChipInput
              placeholder="Type Values"
              inputHint={null}
              // eslint-disable-next-line react/prop-types
              labels={props.values}
              onChange={({ labels }) => {
                if (labels?.length < 6) {
                  handleOnChange({ values: labels?.map((item) => item.replace(/\s/g, '')) ?? [] });
                }
              }}
            />
          )}
          {props.type === DEMAND_TAG_KEY_VALUE_TARGETING_TYPE.list && (
            <Autocomplete
              size="small"
              multiple
              limitTags={5}
              autoSuggest
              disableCloseOnSelect
              options={props.keyListsOptions}
              // eslint-disable-next-line react/prop-types
              value={props.valueLists}
              onChange={(event, newValue) => {
                handleOnChange({ valueLists: newValue });
              }}
              onOpen={() => {
                props.getKeyListsOptions('');
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  size="small"
                  placeholder="Select Values Lists"
                  onChange={(e) => {
                    props.getKeyListsOptions(e.target.value);
                  }}
                />
              )}
            />
          )}
          <FormRowItem itemsInRow={4} />
        </Stack>
      </FormRow>
    </FormGroup>
  );
}

KeyValue.propTypes = {
  id: PropTypes.number.isRequired,
  keyName: PropTypes.shape({}).isRequired,
  state: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,

  keyNamesOptions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  keyListsOptions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,

  onChange: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  getKeyNamesOptions: PropTypes.func.isRequired,
  getKeyListsOptions: PropTypes.func.isRequired,
};

export default KeyValue;
