import React from 'react';
import { HelpPopoverProps } from './HelpPopover.js';
import '@bigbinary/neetoui';

interface Details {
  name?: string;
  value: string;
  label?: string;
  key?: string;
  icon?: React.ReactNode;
  error?: string;
  kind?: string;
  isEditable?: boolean;
  extraClasses?: string;
  extraWrapperClasses?: string;
  id?: string;
  fieldValueId?: string;
  custom?: boolean;
  showCopyButton?: boolean;
}

/**
 *
 * SessionEnvironment is a component that displays the session details like name,
 *
 * email, phone number, etc. It also provides an option to view more details, where
 *
 * you can see additional information about the session, which is hidden by
 *
 * default.
 *
 * ![Screenshot](https://github.com/user-attachments/assets/37f608e0-8a3d-4f47-87e2-fcd49ba067a4|height=200|width=300)
 *
 * @example 
 *
 * import SessionEnvironment from "@bigbinary/neeto-molecules/SessionEnvironment";
 * 
 * const App = () => {
 *   const details = [
 *     { name: "name", value: "John Doe" },
 *     { name: "email", value: "john.doe@example.com" },
 *     { name: "phone_number", value: "+1 123 456 7890" },
 *   ];
 * 
 *   const moreDetails = [
 *     {
 *       name: "created_at",
 *       value: "2021-09-01 12:00:00",
 *       kind: "datetime",
 *       label: "Created at",
 *     },
 *     {
 *       name: "updated_at",
 *       value: "2021-09-01 12:00:00",
 *       kind: "datetime",
 *       label: "Updated at",
 *     },
 *   ];
 * 
 *   return (
 *     <div>
 *       <SessionEnvironment
 *         details={details}
 *         helpPopoverProps={{
 *           description:
 *             "The details pane shows extra information about your recording. Additional details on each metadata field can be found in the help article.",
 *           helpLinkProps: {
 *             href: "https://neetoreplayhelp.neetokb.com/articles/recording-details",
 *             label: t("common.viewHelpArticle"),
 *           },
 *         }}
 *         moreDetails={moreDetails}
 *         title="Recording details"
 *       />
 *     </div>
 *   );
 * };
 * @endexample
 * @example 
 *
 * import { useState } from "react";
 * 
 * import SessionEnvironment from "@bigbinary/neeto-molecules/SessionEnvironment";
 * 
 * const App = () => {
 *   const basicDetails = [
 *     {
 *       name: "name",
 *       value: "John Doe",
 *       isEditable: true,
 *     },
 *     {
 *       name: "email",
 *       value: "john.doe@example.com",
 *       isEditable: true,
 *     },
 *     {
 *       name: "phone_number",
 *       value: "+1 123 456 7890",
 *     },
 *   ];
 * 
 *   const moreDetails = [
 *     {
 *       name: "created_at",
 *       value: "2021-09-01 12:00:00",
 *       kind: "datetime",
 *       label: "Created at",
 *     },
 *     {
 *       name: "updated_at",
 *       value: "2021-09-01 12:00:00",
 *       kind: "datetime",
 *       label: "Updated at",
 *     },
 *   ];
 * 
 *   const [editableDetails, setEditableDetails] = useState([
 *     ...basicDetails,
 *     ...moreDetails,
 *   ]);
 * 
 *   const handleSubmit = ({ name, value }) => {
 *     setEditableDetails(oldDetails =>
 *       oldDetails.map(detail => {
 *         if (detail.name === name) {
 *           return { ...detail, value, isEditing: false };
 *         }
 * 
 *         return detail;
 *       })
 *     );
 *   };
 * 
 *   const handleCancel = name => {
 *     setEditableDetails(oldDetails =>
 *       oldDetails.map(detail => {
 *         if (detail.name === name) return findBy({ name }, args.details);
 * 
 *         return detail;
 *       })
 *     );
 *   };
 * 
 *   return (
 *     <div>
 *       <SessionEnvironment
 *         details={basicDetails}
 *         handleCancel={handleCancel}
 *         handleSubmit={handleSubmit}
 *         moreDetails={moreDetails}
 *       />
 *     </div>
 *   );
 * };
 * @endexample
*/
declare const SessionEnvironment: React.FC<{
  allowMultiline?: boolean;
  details: Details[];
  handleCancel?: (string) => void;
  handleSubmit?: (object) => void;
  helpPopoverProps?: HelpPopoverProps;
  iconSize?: number;
  isLoading?: boolean;
  moreDetails?: Details[];
  title?: string;
}>;

export { SessionEnvironment as default };