import React from 'react';
import styled from 'styled-components';
import { Provider } from '../DesignSystem';
import { axeptio } from '../Presets';

export const DecorativePattern = styled.div`
  min-height: 100px;
  height: 100%;
  border: 1px solid #d5d2dd3b;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
  border-radius: 4px;
`;

/**
 * Custom test utility function that wraps a test component with ThemeProvider
 * @param {JSX.Element} component
 */
const withThemeProvider = testComponent => <Provider theme={axeptio}>{testComponent}</Provider>;

const convertHexToRgb = hex => {
  const hexValue = hex.replace('#', '');
  const r = parseInt(hexValue.substring(0, 2), 16);
  const g = parseInt(hexValue.substring(2, 4), 16);
  const b = parseInt(hexValue.substring(4, 6), 16);

  return `rgb(${r}, ${g}, ${b})`;
};

// Additional helper function for Next/Link component
const hrefResolver = doc => {
  const lang = doc?.lang === 'en-us' || doc?.lang === 'en' ? '' : `${doc?.lang?.split('-')?.[0]}/`;
  if (doc && doc.link_type === 'Web') {
    return doc.url;
  } else if (doc && doc.type === 'homepage') {
    return `/${lang}`;
  } else if (doc && doc.type === 'menu') {
    return `/${lang}menu`;
  } else if (doc && doc.lang && doc.uid) {
    return `/${lang}${doc.uid}`;
  }
  return '/';
};

export { withThemeProvider, convertHexToRgb, hrefResolver };