/*
 * Copyright 2025 Commonwealth Scientific and Industrial Research
 * Organisation (CSIRO) ABN 41 687 119 230.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import FormControl from '@mui/material/FormControl';
import FormHelperText from '@mui/material/FormHelperText';
import type { QuestionnaireItem, QuestionnaireItemAnswerOption } from 'fhir/r4';
import type {
  PropsWithIsTabledAttribute,
  PropsWithRenderingExtensionsAttribute
} from '../../../interfaces/renderProps.interface';
import useAnswerOptionVisibility from '../../../hooks/useAnswerOptionVisibility';
import { useRendererConfigStore } from '../../../stores';
import { compareAnswerOptionValue, isOptionDisabled } from '../../../utils/choice';
import { getAnswerOptionLabel } from '../../../utils/openChoice';
import AnswerOptionUnavailableWarning from '../ItemParts/AnswerOptionUnavailableWarning';
import DisplayUnitText from '../ItemParts/DisplayUnitText';
import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
import { StandardTextField } from '../Textfield.styles';
import StyledText from '../ItemParts/StyledText';
import AccessibleFeedback from '../ItemParts/AccessibleFeedback';

interface ChoiceSelectAnswerOptionFieldsProps
  extends PropsWithIsTabledAttribute,
    PropsWithRenderingExtensionsAttribute {
  qItem: QuestionnaireItem;
  options: QuestionnaireItemAnswerOption[];
  valueSelect: QuestionnaireItemAnswerOption | null;
  feedback: string;
  feedbackSeverity?: 'error' | 'warning';
  readOnly: boolean;
  expressionUpdated: boolean;
  answerOptionsToggleExpressionsMap: Map<string, boolean>;
  instructionsId: string | undefined;
  onSelectChange: (newValue: QuestionnaireItemAnswerOption | null) => void;
}

function ChoiceSelectAnswerOptionFields(props: ChoiceSelectAnswerOptionFieldsProps) {
  const {
    qItem,
    options,
    valueSelect,
    feedback,
    feedbackSeverity,
    readOnly,
    expressionUpdated,
    isTabled,
    renderingExtensions,
    answerOptionsToggleExpressionsMap,
    instructionsId,
    onSelectChange
  } = props;

  const readOnlyVisualStyle = useRendererConfigStore.use.readOnlyVisualStyle();
  const textFieldWidth = useRendererConfigStore.use.textFieldWidth();
  const rendererStrings = useRendererConfigStore.use.rendererStrings();

  const { visibleOptions, hasUnavailableDisplayOptions } = useAnswerOptionVisibility(
    options,
    valueSelect ? [valueSelect] : []
  );

  const { displayUnit, displayPrompt, entryFormat } = renderingExtensions;

  const [inputValue, setInputValue] = React.useState('');

  // Keep track of current selected value when input is changed
  const [currentValueSelect, setCurrentValueSelect] =
    React.useState<QuestionnaireItemAnswerOption | null>(valueSelect);

  return (
    <FormControl
      error={!!feedback && feedbackSeverity !== 'warning'}
      sx={{
        width: '100%',
        maxWidth: !isTabled ? textFieldWidth : 3000,
        minWidth: 160,
        flexGrow: 1
      }}>
      <Autocomplete
        id={qItem.type + '-' + qItem.linkId}
        value={valueSelect ?? null}
        options={visibleOptions}
        getOptionDisabled={(option) => isOptionDisabled(option, answerOptionsToggleExpressionsMap)}
        getOptionLabel={(option) => getAnswerOptionLabel(option)}
        isOptionEqualToValue={(option, value) => compareAnswerOptionValue(option, value)}
        onChange={(_, newValue) => {
          onSelectChange(newValue);
          setCurrentValueSelect(newValue);
        }}
        inputValue={inputValue}
        onInputChange={(_, newInputValue, reason) => {
          if (!inputValue && valueSelect && reason !== 'clear') {
            // Convert current input value to be the current value plus additional input
            onSelectChange(null);
            setInputValue(getAnswerOptionLabel(valueSelect) + newInputValue);
          } else {
            setInputValue(newInputValue);
          }
        }}
        onBlur={() => {
          // Set value on blur if there is any current input
          if (currentValueSelect) {
            onSelectChange(currentValueSelect);
            setInputValue(''); // Clear input after blur
          }
        }}
        onKeyDown={(e) => {
          if (e.key === 'Backspace') {
            if (!inputValue && valueSelect) {
              // Convert current selection to input value on backspace when input is empty
              onSelectChange(null);
              setInputValue(getAnswerOptionLabel(valueSelect));
            }
          }
        }}
        fullWidth
        autoHighlight
        sx={{ '& .MuiAutocomplete-tag': { mx: 0 } }}
        size="small"
        disabled={readOnly && readOnlyVisualStyle === 'disabled'}
        readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
        renderInput={(params) => {
          // Merge instructionsId with any existing aria-describedby from Autocomplete
          const existingAriaDescribedBy = params.inputProps?.['aria-describedby'];
          const mergedAriaDescribedBy = [existingAriaDescribedBy, instructionsId]
            .filter(Boolean)
            .join(' ');

          return (
            <StandardTextField
              textFieldWidth={textFieldWidth}
              isTabled={isTabled}
              error={!!feedback && feedbackSeverity !== 'warning'}
              placeholder={valueSelect ? undefined : entryFormat || displayPrompt}
              {...params}
              slotProps={{
                input: {
                  ...params.InputProps,
                  readOnly: readOnly && readOnlyVisualStyle === 'readonly',
                  endAdornment: (
                    <>
                      {params.InputProps.endAdornment}
                      <ExpressionUpdateFadingIcon fadeIn={expressionUpdated} disabled={readOnly} />
                      <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                    </>
                  ),
                  sx: {
                    '&.MuiOutlinedInput-root.MuiInputBase-sizeSmall .MuiAutocomplete-input': {
                      paddingLeft: '0px'
                    }
                  }
                },
                htmlInput: {
                  ...params.inputProps,
                  ...(isTabled
                    ? { 'aria-label': qItem.text ?? rendererStrings.unnamedChoiceDropdown }
                    : { 'aria-labelledby': `label-${qItem.linkId}` }),
                  ...(mergedAriaDescribedBy && { 'aria-describedby': mergedAriaDescribedBy }),
                  role: 'combobox'
                }
              }}
            />
          );
        }}
        renderOption={(optionProps, option) => {
          const { key, ...rest } = optionProps;
          return (
            <li key={key} {...rest}>
              <span>
                {option.valueString ? (
                  <StyledText
                    textToDisplay={getAnswerOptionLabel(option)}
                    element={option._valueString}
                  />
                ) : (
                  getAnswerOptionLabel(option)
                )}
              </span>
            </li>
          );
        }}
        renderValue={(value, getItemProps) => {
          const selectedOption = options.find((opt) => opt.valueString === value.valueString);
          // eslint-disable-next-line @typescript-eslint/no-unused-vars
          const { onDelete, ...rest } = getItemProps();
          return (
            <span {...rest} style={{ paddingLeft: '8.5px' }}>
              {value.valueString && selectedOption ? (
                <StyledText
                  textToDisplay={getAnswerOptionLabel(value)}
                  element={selectedOption._valueString}
                />
              ) : (
                getAnswerOptionLabel(value)
              )}
            </span>
          );
        }}
      />

      {hasUnavailableDisplayOptions ? (
        <AnswerOptionUnavailableWarning variant="helperText" />
      ) : null}
      {feedback ? (
        <FormHelperText sx={feedbackSeverity === 'warning' ? { color: 'warning.main' } : undefined}>
          <AccessibleFeedback>{feedback}</AccessibleFeedback>
        </FormHelperText>
      ) : null}
    </FormControl>
  );
}

export default ChoiceSelectAnswerOptionFields;