<script setup lang="ts">
import type { CSSProperties } from 'vue';

import type { ContentCompactType } from '@easyflow-core/typings';

import { computed } from 'vue';

import { useLayoutContentStyle } from '@easyflow-core/composables';
import { Slot } from '@easyflow-core/shadcn-ui';

interface Props {
  /**
   * 内容区域定宽
   */
  contentCompact: ContentCompactType;
  /**
   * 定宽布局宽度
   */
  contentCompactWidth: number;
  padding: number;
  paddingBottom: number;
  paddingLeft: number;
  paddingRight: number;
  paddingTop: number;
}

const props = withDefaults(defineProps<Props>(), {});

const { contentElement, overlayStyle } = useLayoutContentStyle();
const flowContinuationStyle: CSSProperties = {
  backgroundImage:
    'radial-gradient(ellipse 96% 34% at -4% -6%, hsl(var(--nav-flow-core) / 0.18) 0%, hsl(var(--nav-flow-core) / 0.08) 30%, transparent 62%), radial-gradient(ellipse 74% 24% at 20% 8%, hsl(var(--nav-ambient) / 0.2) 0%, transparent 64%), linear-gradient(128deg, hsl(var(--nav-flow-trace) / 0.1) 0%, hsl(var(--nav-flow-secondary) / 0.08) 12%, transparent 24%, transparent 48%, hsl(var(--nav-flow-core) / 0.05) 66%, transparent 88%), radial-gradient(ellipse 52% 18% at 50% 26%, hsl(var(--nav-flow-accent) / 0.05) 0%, transparent 72%)',
};

const style = computed((): CSSProperties => {
  const {
    contentCompact,
    padding,
    paddingBottom,
    paddingLeft,
    paddingRight,
    paddingTop,
  } = props;

  const compactStyle: CSSProperties =
    contentCompact === 'compact'
      ? { margin: '0 auto', width: `${props.contentCompactWidth}px` }
      : {};
  return {
    ...compactStyle,
    backgroundColor: 'hsl(var(--surface-canvas) / 0.72)',
    backgroundImage:
      'linear-gradient(180deg, hsl(var(--nav-surface) / 0.72) 0%, hsl(var(--surface-canvas) / 0.92) 16%, hsl(var(--background) / 0.98) 100%)',
    flex: 1,
    padding: `${padding}px`,
    paddingBottom: `${paddingBottom}px`,
    paddingLeft: `${paddingLeft}px`,
    paddingRight: `${paddingRight}px`,
    paddingTop: `${paddingTop}px`,
  };
});
</script>

<template>
  <main ref="contentElement" :style="style" class="relative overflow-hidden">
    <div
      :style="flowContinuationStyle"
      class="pointer-events-none absolute inset-0"
    ></div>
    <Slot :style="overlayStyle">
      <slot name="overlay"></slot>
    </Slot>
    <div class="relative z-[1] h-full">
      <slot></slot>
    </div>
  </main>
</template>
