import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs';
import { Button } from '@/components/Button';
import { FunctionComponent } from 'preact';
import { Title, Text, Subtitle, PreferencesSegment } from '../../components';

export const ConfirmCustomExtension: FunctionComponent<{
  component: SNComponent;
  callback: (confirmed: boolean) => void;
}> = ({ component, callback }) => {
  const fields = [
    {
      label: 'Name',
      value: component.package_info.name,
    },
    {
      label: 'Description',
      value: component.package_info.description,
    },
    {
      label: 'Version',
      value: component.package_info.version,
    },
    {
      label: 'Hosted URL',
      value: component.thirdPartyPackageInfo.url,
    },
    {
      label: 'Download URL',
      value: component.package_info.download_url,
    },
    {
      label: 'Extension Type',
      value: DisplayStringForContentType(component.content_type),
    },
  ];

  return (
    <PreferencesSegment>
      <Title>Confirm Extension</Title>

      {fields.map((field) => {
        if (!field.value) {
          return undefined;
        }
        return (
          <>
            <Subtitle>{field.label}</Subtitle>
            <Text className={'wrap'}>{field.value}</Text>
            <div className="min-h-2" />
          </>
        );
      })}

      <div className="min-h-3" />

      <div className="flex flex-row">
        <Button
          className="min-w-20"
          variant="normal"
          label="Cancel"
          onClick={() => callback(false)}
        />

        <div className="min-w-3" />

        <Button
          className="min-w-20"
          variant="normal"
          label="Install"
          onClick={() => callback(true)}
        />
      </div>
    </PreferencesSegment>
  );
};
