import { ReactReaderStyle, type IReactReaderStyle } from "react-reader";
import type { ReadingSettings } from "../types/reader";

const THEME_ARROWS: Record<ReadingSettings["theme"], string> = {
  sepia: "#b8a898",
  dark: "#666666",
  light: "#cccccc",
  paper: "#c4b8a8",
};

const THEME_ARROW_HOVER: Record<ReadingSettings["theme"], string> = {
  sepia: "#8a7a6a",
  dark: "#aaaaaa",
  light: "#888888",
  paper: "#7a6a5a",
};

/** Build complete react-reader styles — must spread ReactReaderStyle; partial objects break layout. */
export function buildReaderStyles(settings: ReadingSettings): IReactReaderStyle {
  return {
    ...ReactReaderStyle,
    container: {
      ...ReactReaderStyle.container,
      height: "100%",
      width: "100%",
    },
    containerExpanded: ReactReaderStyle.containerExpanded,
    readerArea: {
      ...ReactReaderStyle.readerArea,
      backgroundColor: settings.background_color,
      transition: undefined,
    },
    titleArea: {
      ...ReactReaderStyle.titleArea,
      display: "none",
    },
    reader: {
      ...ReactReaderStyle.reader,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    arrow: {
      ...ReactReaderStyle.arrow,
      color: THEME_ARROWS[settings.theme],
      fontSize: 48,
      marginTop: -24,
    },
    arrowHover: {
      ...ReactReaderStyle.arrowHover,
      color: THEME_ARROW_HOVER[settings.theme],
    },
    tocButton: {
      ...ReactReaderStyle.tocButton,
      display: "none",
    },
    tocArea: ReactReaderStyle.tocArea,
    tocAreaButton: ReactReaderStyle.tocAreaButton,
    loadingView: {
      ...ReactReaderStyle.loadingView,
      color: "#999",
    },
  };
}