import React from 'react';
import styled from 'styled-components';
import { useLocation } from 'react-router-dom';

import type { JSX } from 'react';
import type { SubmitFeedbackParams } from '@redocly/theme/core/types';

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { Comment } from '@redocly/theme/components/Feedback/Comment';
import { Portal } from '@redocly/theme/components/Portal/Portal';

export type ReportDialogProps = {
  location: string;
  lang?: string;
  onSubmit: () => void;
  onCancel: () => void;
  settings: {
    label?: string;
  };
  submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
  className?: string;
};

export function ReportDialog({
  location,
  settings,
  onSubmit,
  onCancel,
  submitFeedback,
  lang,
}: ReportDialogProps): JSX.Element {
  const { label } = settings;
  const { useTelemetry } = useThemeHooks();
  const { pathname } = useLocation();
  const telemetry = useTelemetry();

  return (
    <Portal>
      <ReportDialogWrapper className="scroll-lock" data-component-name="Feedback/ReportDialog">
        <Comment
          settings={{ label }}
          onSubmit={async (value) => {
            await submitFeedback({
              type: 'problem',
              values: value,
              location,
              path: pathname,
              lang,
            });
            telemetry.sendCodeSnippetReportedMessage();
            onSubmit();
          }}
          isDialog={true}
          onCancel={onCancel}
        />
      </ReportDialogWrapper>
    </Portal>
  );
}

const ReportDialogWrapper = styled.div`
  font-family: var(--font-family-base);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-color-modal-overlay);
  z-index: var(--z-index-overlay);
  display: flex;
  align-items: center;
  justify-content: center;

  & > * {
    background: var(--modal-bg-color);
    box-shadow: var(--modal-box-shadow);
    padding: var(--spacing-base);
    margin: var(--spacing-base);
    max-width: var(--feedback-report-dialog-max-width);
    width: var(--feedback-report-dialog-width);
    max-height: var(--feedback-report-dialog-max-height);
  }
`;