import { style } from '@vanilla-extract/css';
import { DefaultReset, color, config, toRem } from 'folds';

const BAR_HEIGHT = toRem(32);
const CONTROL_WIDTH = toRem(46);

export const TitleBar = style([
  DefaultReset,
  {
    display: 'flex',
    alignItems: 'stretch',
    flexShrink: 0,
    height: BAR_HEIGHT,
    width: '100%',
    backgroundColor: color.SurfaceVariant.Container,
    color: color.SurfaceVariant.OnContainer,
    borderBottom: `${toRem(1)} solid ${color.SurfaceVariant.ContainerLine}`,
    // Sit above app content but never intercept scroll etc. below the bar.
    userSelect: 'none',
  },
]);

// The draggable region carries `data-tauri-drag-region`; it must expand to fill
// the free space so most of the bar is grabbable.
export const DragRegion = style({
  display: 'flex',
  alignItems: 'center',
  flexGrow: 1,
  minWidth: 0,
  gap: config.space.S200,
  paddingInline: config.space.S300,
});

export const Brand = style({
  display: 'flex',
  alignItems: 'center',
  gap: config.space.S200,
  // Children shouldn't swallow the drag; the region itself owns the attribute.
  pointerEvents: 'none',
});

export const Controls = style({
  display: 'flex',
  alignItems: 'stretch',
  flexShrink: 0,
});

export const ControlButton = style([
  DefaultReset,
  {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: CONTROL_WIDTH,
    height: '100%',
    padding: 0,
    border: 'none',
    cursor: 'pointer',
    backgroundColor: 'transparent',
    color: 'inherit',
    transition: 'background-color 100ms ease',
    selectors: {
      '&:hover': {
        backgroundColor: color.SurfaceVariant.ContainerLine,
      },
    },
  },
]);

export const ControlButtonClose = style({
  selectors: {
    '&:hover': {
      backgroundColor: color.Critical.Main,
      color: color.Critical.OnMain,
    },
  },
});