import type { InvoiceStyles } from './types';

export const colorDark = '#222';
export const colorDark2 = '#888';
export const colorGray = '#e3e3e3';
export const colorWhite = '#fff';
export const colorGreen = '#4caf50';

export const pdfStyles: InvoiceStyles = {
  template: {
    padding: '40px 35px',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
    fontSize: '11px',
    color: '#555',
    backgroundColor: '#fff',
    width: '210mm',
    minHeight: '297mm',
    position: 'absolute',
    left: '-9999px',
    printColorAdjust: 'exact',
    letterSpacing: '0.3px',
    lineHeight: '1.5',
  },
  dark: {
    color: colorDark,
  },
  white: {
    color: colorWhite,
  },
  gray: {
    color: colorDark2,
  },
  green: {
    color: colorGreen,
  },
  'bg-dark': {
    backgroundColor: colorDark2,
  },
  'bg-gray': {
    backgroundColor: colorGray,
  },
  flex: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    alignItems: 'flex-start',
  },
  bold: {
    fontWeight: 'bold',
  },
  'w-auto': {
    flex: 1,
    paddingRight: '8px',
  },
  'w-100': { width: '100%' },
  'w-50': { width: '50%' },
  'w-55': { width: '55%' },
  'w-45': { width: '45%' },
  'w-60': { width: '60%' },
  'w-40': { width: '40%' },
  'w-48': { width: '48%' },
  'w-38': { width: '38%' },
  'w-83': { width: '83%' },
  'w-17': { width: '17%' },
  'w-18': { width: '18%' },
  'w-15': { width: '15%' },
  row: {
    borderBottom: `1px solid ${colorGray}`,
    marginBottom: '2px',
  },
  'mt-60': { marginTop: '60px' },
  'mt-40': { marginTop: '40px' },
  'mt-30': { marginTop: '30px' },
  'mt-20': { marginTop: '20px' },
  'mt-10': { marginTop: '10px' },
  'mb-5': { marginBottom: '5px' },
  'p-4-8': { padding: '4px 8px' },
  'p-5': { padding: '5px' },
  'p-10': { padding: '10px' },
  'pb-15': { paddingBottom: '15px' },
  right: {
    marginLeft: 'auto',
    textAlign: 'right' as const,
  },
  center: { textAlign: 'center' },
  'fs-20': { fontSize: '20px' },
  'fs-30': { fontSize: '30px' },
  'fs-12': { fontSize: '12px' },
  logo: {
    display: 'block',
    borderRadius: '10px',
    width: '60px',
    height: '60px',
    objectFit: 'contain',
  },
  'flex-1': {
    flex: 1,
  },
  'justify-between': {
    justifyContent: 'space-between',
  },
  'items-center': {
    alignItems: 'center',
  },
  'gap-20': {
    gap: '20px',
  },
  block: { display: 'block' },
  'ml-40': { marginLeft: '40px' },
  'text-right': { textAlign: 'right' },
};

export const styles = `
  .invoice-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
  }

  .invoice-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    letter-spacing: 0.3px;
  }

  .date-format {
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.5px;
  }

  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
`;

export const applyStyles = () => {
  const styleElement = document.createElement('style');
  styleElement.textContent = styles;
  document.head.appendChild(styleElement);
};
