import { createGlobalStyle } from "styled-components";
import { Theme } from "./theme";

export const GlobalStyles = createGlobalStyle<{ theme: Theme }>`
  :root {
    --ds-theme-font-family: ${({ theme }) => theme.typography.fontFamily};
    --ds-theme-font-weight-light: ${({ theme }) => theme.typography.fontWeights.light};
    --ds-theme-font-weight-regular: ${({ theme }) => theme.typography.fontWeights.regular};
    --ds-theme-font-weight-medium: ${({ theme }) => theme.typography.fontWeights.medium};
    --ds-theme-font-weight-semibold: ${({ theme }) => theme.typography.fontWeights.semibold};
    --ds-theme-font-weight-bold: ${({ theme }) => theme.typography.fontWeights.bold};

    --ds-theme-button-border-radius: ${({ theme }) => theme.button.borderRadius};
    --ds-theme-button-padding: ${({ theme }) => theme.button.padding};
    --ds-theme-button-display: ${({ theme }) => theme.button.display};
    --ds-theme-button-justify-content: ${({ theme }) => theme.button.justifyContent};
    --ds-theme-button-align-items: ${({ theme }) => theme.button.alignItems};
    --ds-theme-button-gap: ${({ theme }) => theme.button.gap};
    --ds-theme-button-font-size: ${({ theme }) => theme.button.typography.fontSize};
    --ds-theme-button-font-weight: ${({ theme }) => theme.button.typography.fontWeight};
    --ds-theme-button-font-size-small: ${({ theme }) => theme.button.typography.small.fontSize};
    --ds-theme-button-font-size-large: ${({ theme }) => theme.button.typography.large.fontSize};

    --ds-theme-button-icon-width: ${({ theme }) => theme.button.iconOnly.width};
    --ds-theme-button-icon-height: ${({ theme }) => theme.button.iconOnly.height};
    --ds-theme-button-icon-size: ${({ theme }) => theme.button.iconOnly.iconSize};
    --ds-theme-button-icon-padding: ${({ theme }) => theme.button.iconOnly.iconPadding};

    --ds-theme-text-primary: ${({ theme }) => theme.semantic.text.primary};
    --ds-theme-text-secondary: ${({ theme }) => theme.semantic.text.secondary};
    --ds-theme-text-inverse: ${({ theme }) => theme.semantic.text.inverse};

    --ds-theme-surface-background: ${({ theme }) => theme.semantic.surface.background};
    --ds-theme-surface-card: ${({ theme }) => theme.semantic.surface.card};
    --ds-theme-surface-section: ${({ theme }) => theme.semantic.surface.section};
    --ds-theme-surface-sidebar-border: ${({ theme }) => theme.semantic.surface.sidebarBorder};

    --ds-feedback-success: ${({ theme }) => theme.semantic.feedback.success};
    --ds-feedback-info: ${({ theme }) => theme.semantic.feedback.info};
    --ds-feedback-warning: ${({ theme }) => theme.semantic.feedback.warning};
    --ds-feedback-help: ${({ theme }) => theme.semantic.feedback.help};
    --ds-feedback-danger: ${({ theme }) => theme.semantic.feedback.danger};
    --ds-feedback-secondary: ${({ theme }) => theme.semantic.feedback.secondary};

    --ds-theme-button-primary-background: ${({ theme }) => theme.semantic.button.primary.background};
    --ds-theme-button-primary-background-hover: ${({ theme }) => theme.semantic.button.primary.backgroundHover};
    --ds-theme-button-primary-border: ${({ theme }) => theme.semantic.button.primary.border};
    --ds-theme-button-primary-text: ${({ theme }) => theme.semantic.button.primary.text};

    --ds-theme-button-secondary-background: ${({ theme }) => theme.semantic.button.secondary.background};
    --ds-theme-button-secondary-background-muted: ${({ theme }) => theme.semantic.button.secondary.backgroundMuted};
    --ds-theme-button-secondary-border: ${({ theme }) => theme.semantic.button.secondary.border};
    --ds-theme-button-secondary-text: ${({ theme }) => theme.semantic.button.secondary.text};

    --ds-theme-button-tertiary-background: ${({ theme }) => theme.semantic.button.tertiary.background};
    --ds-theme-button-tertiary-text: ${({ theme }) => theme.semantic.button.tertiary.text};

    --ds-theme-button-disabled-background: ${({ theme }) => theme.semantic.button.disabled.background};
    --ds-theme-button-disabled-border: ${({ theme }) => theme.semantic.button.disabled.border};
    --ds-theme-button-disabled-text: ${({ theme }) => theme.semantic.button.disabled.text};
    --ds-theme-button-icon-border: ${({ theme }) => theme.semantic.button.iconBorder};
  }

  * {
    font-family: var(--ds-theme-font-family);
  }

  .custom-button {
    border-radius: var(--ds-theme-button-border-radius);
    padding: var(--ds-theme-button-padding);
    display: var(--ds-theme-button-display);
    justify-content: var(--ds-theme-button-justify-content);
    align-items: var(--ds-theme-button-align-items);
    gap: var(--ds-theme-button-gap);
    font-size: var(--ds-theme-button-font-size);
    font-weight: var(--ds-theme-button-font-weight);
    font-style: normal;
    text-align: center;
  }

  .custom-button-icon {
    width: var(--ds-theme-button-icon-width);
    height: var(--ds-theme-button-icon-height);
    padding: var(--ds-theme-button-icon-padding);
  }

  .p-button {
    font-family: var(--ds-theme-font-family) !important;
    font-size: var(--ds-theme-button-font-size) !important;
    font-weight: var(--ds-theme-button-font-weight) !important;
    font-style: normal !important;
    text-align: center !important;
  }

  .p-button.p-button-sm {
    font-size: var(--ds-theme-button-font-size-small) !important;
  }

  .p-button.p-button-lg {
    font-size: var(--ds-theme-button-font-size-large) !important;
  }
`;