import { ProjectInfo } from "#/project";
import { components } from "@shalu/dashboard-ui";
import { kebabCase } from 'lodash-es';

export const buildHtml = (project: ProjectInfo) => {
  console.log(project, components)
  const page = project.pages[0];

  return `
    <div class="player-page" style="background: #000;">
      <div class="page-wrapper" :style="pageWapperStyle">
        ${
          page.elements.map(element => {
            return `
              <div 
                :style="{
                  width: '${element.container.props.width}px',
                  height: '${element.container.props.height}px',
                  left: '${element.container.props.x}px',
                  top: '${element.container.props.y}px',
                  position: 'absolute',
                  zIndex: props.element.zIndex,
                }"
              >
                <${kebabCase(components.Container.name)} v-bind="${JSON.stringify(element.container)}">
                  <${kebabCase(components[element.componentType].name)} v-bind="${JSON.stringify(element.props)}" :width="${element.container.props.width}" :height="${element.container.props.height}"/>
                </$>
              </div>
            `
          })
        }
      </div>
    </div>
  `
}