/*
 * 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 type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
import { StandardTextField } from '../Textfield.styles';
import AttachmentFileCollector from './AttachmentFileCollector';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import type { AttachmentValues } from './AttachmentItem';
import AttachmentUrlField from './AttachmentUrlField';
import { useRendererConfigStore } from '../../../stores';
import { StyledRequiredTypography } from '../Item.styles';
import InputAdornment from '@mui/material/InputAdornment';
import { ClearButtonAdornment } from '../ItemParts/ClearButtonAdornment';

interface AttachmentFieldProps extends PropsWithIsTabledAttribute {
  linkId: string;
  itemType: string;
  itemText: string | undefined;
  attachmentValues: AttachmentValues;
  feedback: string;
  feedbackSeverity?: 'error' | 'warning';
  readOnly: boolean;
  instructionsId: string | undefined;
  onUploadFile: (file: File | null) => void;
  onUrlChange: (url: string) => void;
  onFileNameChange: (fileName: string) => void;
}

function AttachmentField(props: AttachmentFieldProps) {
  const {
    linkId,
    itemType,
    itemText,
    attachmentValues,
    feedback,
    feedbackSeverity,
    readOnly,
    isTabled,
    instructionsId,
    onUploadFile,
    onUrlChange,
    onFileNameChange
  } = props;

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

  const readOnlyTextColor = readOnlyVisualStyle === 'disabled' ? 'text.disabled' : 'text.secondary';

  const { uploadedFile, url, fileName } = attachmentValues;

  // TODO: Consider accessible items for attachment fields too if #1096 is fixed.

  return (
    <>
      <div
        role="group"
        {...(!isTabled && { 'aria-labelledby': `label-${linkId}` })}
        {...(isTabled && { 'aria-label': itemText ?? rendererStrings.unnamedAttachment })}
        {...(instructionsId && { 'aria-describedby': instructionsId })}>
        <Stack rowGap={1} id={itemType + '-' + linkId}>
          <Typography
            component="div"
            variant="caption"
            color={readOnly ? 'text.disabled' : 'text.secondary'}
            sx={{ fontStyle: 'italic' }}>
            An attachment must either have a file or a URL, or both.
          </Typography>
          <Box>
            <AttachmentFileCollector
              uploadedFile={uploadedFile}
              readOnly={readOnly}
              isTabled={isTabled}
              instructionsId={instructionsId}
              onUploadFile={onUploadFile}
            />
          </Box>

          <AttachmentUrlField
            linkId={linkId}
            url={url}
            readOnly={readOnly}
            isTabled={isTabled}
            onUrlChange={onUrlChange}
          />

          <Box>
            <Typography
              component="div"
              variant="body2"
              color={readOnly ? readOnlyTextColor : 'text.primary'}>
              File name (optional)
            </Typography>
            <StandardTextField
              multiline
              fullWidth
              textFieldWidth={textFieldWidth}
              isTabled={isTabled}
              id={linkId}
              value={fileName}
              onChange={(event) => onFileNameChange(event.target.value)}
              disabled={readOnly && readOnlyVisualStyle === 'disabled'}
              size="small"
              data-test="q-item-attachment-field"
              slotProps={{
                input: {
                  readOnly: readOnly && readOnlyVisualStyle === 'readonly',
                  endAdornment: (
                    <InputAdornment position="end">
                      <ClearButtonAdornment
                        readOnly={readOnly}
                        onClear={() => {
                          onFileNameChange('');
                        }}
                      />
                    </InputAdornment>
                  )
                },
                htmlInput: {
                  'data-test': 'q-item-attachment-file-name',
                  'aria-label': 'File name (optional)',
                  ...(instructionsId && { 'aria-describedby': instructionsId })
                }
              }}
            />
          </Box>

          {uploadedFile && url ? (
            <Typography component="div" color={readOnly ? readOnlyTextColor : 'text.primary'}>
              Ensure that the attached file and URL has the same content.
            </Typography>
          ) : null}
        </Stack>
      </div>

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

export default AttachmentField;