/*
 * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (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 { Box } from '@mui/material';
import { Typography, TypographyVariantValue } from '@okta/odyssey-react-mui';
import { h } from 'preact';

import { useHtmlContentParser } from '../../hooks';
import { DescriptionElement, UISchemaElementComponent } from '../../types';

const odyTypographyVariantMapping: Record<
'body1' | 'subtitle1' | 'legend',
TypographyVariantValue
> = {
  body1: 'body',
  subtitle1: 'subordinate',
  legend: 'legend',
};

const InformationalText: UISchemaElementComponent<{
  uischema: DescriptionElement
}> = ({
  uischema,
}) => {
  const {
    content,
    dataSe,
    variant,
  } = uischema.options;
  const parsedContent = useHtmlContentParser(content, uischema.parserOptions);

  return (
    <Box
      display="flex"
      justifyContent="flex-start"
    >
      <Typography
        component="p"
        variant={variant ? odyTypographyVariantMapping[variant]
          : odyTypographyVariantMapping.body1}
        testId={dataSe || 'o-form-explain'}
        translate={uischema.noTranslate ? 'no' : undefined}
      >
        {parsedContent}
      </Typography>
    </Box>
  );
};

export default InformationalText;