/*
 * 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 { useState } from 'react';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import Autocomplete from '@mui/material/Autocomplete';
import FormControl from '@mui/material/FormControl';
import FormHelperText from '@mui/material/FormHelperText';
import Typography from '@mui/material/Typography';
import type { Coding, QuestionnaireItem } from 'fhir/r4';
import type { TerminologyError } from '../../../hooks/useValueSetCodings';
import type {
  PropsWithIsTabledAttribute,
  PropsWithRenderingExtensionsAttribute
} from '../../../interfaces/renderProps.interface';
import { useRendererConfigStore } from '../../../stores';
import { interpolate } from '../../../i18n';
import { isCodingDisabled } from '../../../utils/choice';
import ExpressionUpdateFadingIcon from '../ItemParts/ExpressionUpdateFadingIcon';
import { StyledAlert } from '../../Alert.styles';
import DisplayUnitText from '../ItemParts/DisplayUnitText';
import { StandardTextField } from '../Textfield.styles';
import AccessibleFeedback from '../ItemParts/AccessibleFeedback';

interface ChoiceSelectAnswerValueSetFieldsProps
  extends PropsWithIsTabledAttribute,
    PropsWithRenderingExtensionsAttribute {
  qItem: QuestionnaireItem;
  codings: Coding[];
  valueCoding: Coding | null;
  terminologyError: TerminologyError;
  feedback: string;
  feedbackSeverity?: 'error' | 'warning';
  readOnly: boolean;
  expressionUpdated: boolean;
  answerOptionsToggleExpressionsMap: Map<string, boolean>;
  instructionsId?: string;
  onSelectChange: (newValue: Coding | null) => void;
}

function ChoiceSelectAnswerValueSetFields(props: ChoiceSelectAnswerValueSetFieldsProps) {
  const {
    qItem,
    codings,
    valueCoding,
    terminologyError,
    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 { displayUnit, displayPrompt, entryFormat } = renderingExtensions;

  const [open, setOpen] = useState(false);

  // Handle focus with delayed dropdown opening for better screen reader experience
  function handleFocus() {
    // Delay opening to allow screen readers to announce the field name first
    setTimeout(() => {
      setOpen(true);
    }, 150); // 150ms delay allows VoiceOver to announce the field
  }

  if (codings.length > 0) {
    return (
      <FormControl
        error={!!feedback && feedbackSeverity !== 'warning'}
        sx={{
          width: '100%',
          maxWidth: !isTabled ? textFieldWidth : 3000,
          minWidth: 160,
          flexGrow: 1
        }}>
        <Autocomplete
          {...(!isTabled && { id: `${qItem.type}-${qItem.linkId}` })}
          options={codings}
          getOptionDisabled={(coding) =>
            isCodingDisabled(coding, answerOptionsToggleExpressionsMap)
          }
          getOptionLabel={(option) => option.display ?? `${option.code}`}
          value={valueCoding ?? null}
          onChange={(_, newValue) => onSelectChange(newValue)}
          fullWidth
          autoHighlight
          open={open}
          onOpen={() => setOpen(true)}
          onClose={() => setOpen(false)}
          size="small"
          disabled={readOnly && readOnlyVisualStyle === 'disabled'}
          readOnly={readOnly && readOnlyVisualStyle === 'readonly'}
          renderInput={(params) => (
            <StandardTextField
              multiline
              textFieldWidth={textFieldWidth}
              isTabled={isTabled}
              error={!!feedback && feedbackSeverity !== 'warning'}
              placeholder={valueCoding ? undefined : entryFormat || displayPrompt}
              onFocus={handleFocus}
              {...params}
              slotProps={{
                input: {
                  ...params.InputProps,
                  readOnly: readOnly && readOnlyVisualStyle === 'readonly',
                  endAdornment: (
                    <>
                      {params.InputProps.endAdornment}
                      <ExpressionUpdateFadingIcon fadeIn={expressionUpdated} disabled={readOnly} />
                      <DisplayUnitText readOnly={readOnly}>{displayUnit}</DisplayUnitText>
                    </>
                  )
                },
                htmlInput: {
                  ...params.inputProps,
                  ...(isTabled
                    ? { 'aria-label': qItem.text ?? rendererStrings.unnamedChoiceDropdown }
                    : { 'aria-labelledby': `label-${qItem.linkId}` }),
                  ...(instructionsId && { 'aria-describedby': instructionsId }),
                  role: 'combobox'
                }
              }}
              data-test="q-item-choice-select-answer-value-set-field"
              data-linkid={qItem.linkId}
              data-label={qItem.text}
            />
          )}
        />

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

  if (terminologyError.error) {
    return (
      <StyledAlert color="error">
        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
        <Typography component="div">
          {interpolate(rendererStrings.terminologyServerFetchError, {
            valueSet: `${terminologyError.answerValueSet}`
          })}
        </Typography>
      </StyledAlert>
    );
  }

  if (codings.length === 0) {
    return (
      <Typography sx={{ py: 0.5 }} fontWeight={600} fontSize={13}>
        {rendererStrings.optionsUnavailable}
      </Typography>
    );
  }

  return (
    <StyledAlert color="error">
      <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
      <Typography component="div">{rendererStrings.optionsFetchError}</Typography>
    </StyledAlert>
  );
}

export default ChoiceSelectAnswerValueSetFields;