import React from 'react';
import { Save } from 'lucide-react';
import { EndpointOptionsPopoverProps } from 'librechat-data-provider';
import { Button } from '~/components/ui';
import { CrossIcon } from '~/components/svg';
import PopoverButtons from './PopoverButtons';
import { cn, removeFocusOutlines } from '~/utils';
import { useLocalize } from '~/hooks';

export default function EndpointOptionsPopover({
  children,
  endpoint,
  visible,
  saveAsPreset,
  closePopover,
}: EndpointOptionsPopoverProps) {
  const localize = useLocalize();
  const cardStyle =
    'shadow-xl rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';

  return (
    <>
      <div
        className={cn(
          'endpointOptionsPopover-container absolute bottom-[-10px] z-0 flex w-full flex-col items-center md:px-4',
          visible ? ' show' : '',
        )}
      >
        <div
          className={cn(
            cardStyle,
            'border-d-0 flex w-full flex-col overflow-hidden rounded-none border-s-0 border-t bg-white px-0 pb-[10px] dark:border-white/10 md:rounded-md md:border lg:w-[736px]',
          )}
        >
          <div className="flex w-full items-center bg-slate-100 px-2 py-2 dark:bg-gray-800/60">
            <Button
              type="button"
              className="h-auto justify-start bg-transparent px-2 py-1 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black focus:ring-0 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white dark:focus:outline-none dark:focus:ring-offset-0"
              onClick={saveAsPreset}
            >
              <Save className="mr-1 w-[14px]" />
              {localize('com_endpoint_save_as_preset')}
            </Button>
            <PopoverButtons endpoint={endpoint} />
            <Button
              type="button"
              className={cn(
                'ml-auto h-auto bg-transparent px-3 py-2 text-xs font-medium font-normal text-black hover:bg-slate-200 hover:text-black dark:bg-transparent dark:text-white dark:hover:bg-gray-700 dark:hover:text-white',
                removeFocusOutlines,
              )}
              onClick={closePopover}
            >
              <CrossIcon />
            </Button>
          </div>
          <div>{children}</div>
        </div>
      </div>
    </>
  );
}