import { lowerFirst, upperFirst } from 'lodash-es';
import { makeRenderer } from '../../../shared/to-scss-mixin-text-style/template.js';
import { svgStringToJSXString } from './svgStringToJSXString.js';

function isVersion17OrNewer(version: string) {
  const [major, minor, patch] = version.split('.').map(Number);
  return major > 17 || (major === 17 && minor >= 0 && patch >= 0);
}

export function generateDefaultJSXTemplate(
  svg: string,
  {
    path,
    mode,
  }: {
    path: Array<string>;
    mode: string;
  },
  options: {
    reactVersion: string | undefined;
    filePrefix: string | undefined;
    fileSuffix: string | undefined;
    isExportDefault: boolean;
    tokenNameTemplate: string;
  },
) {
  const renderVariable = makeRenderer(options.tokenNameTemplate);

  const reactImport = isVersion17OrNewer(options.reactVersion ?? '17.0.0')
    ? ''
    : 'import React from "react";\n\n';
  const prefix = options.filePrefix !== undefined ? `${options.filePrefix}\n` : '';
  const suffix = options.fileSuffix !== undefined ? `\n${options.fileSuffix}` : '';

  let varName = renderVariable({
    mode: upperFirst(mode),
    token: upperFirst(path[path.length - 1]),
    path: path.slice(0, path.length - 1).map(upperFirst),
  });
  varName = lowerFirst(varName);

  return `${prefix}${reactImport}export ${
    options.isExportDefault ? 'default' : 'const ' + varName + ' ='
  } () => (${svgStringToJSXString(svg)});${suffix}`;
}