import { App } from 'vue'
import CodeEditor from '../components/CodeEditor'
import Color from '../components/Color'
import ColorGroup from '../components/ColorGroup'
import AnySelect from '../components/AnySelect'
import AnyRange from '../components/AnyRange'
import Grid from '../components/Grid'
import GridItem from '../components/GridItem'
import Form from '../components/Form'
import GroupForm from '../components/GroupForm'
import GroupTable from '../components/GroupTable'
import Popper from '../components/Popper'
import Upload from '../components/Upload'
import FileView from '../components/FileView'
import Table from '../components/GroupTable'
import RichText from '../components/RichText'
import CheckGroup from '../components/CheckGroup'
import Dom from '../components/Dom'
import { useStyled } from '../utils/src/styled'
import * as utils from '../utils'
const components = [
  CodeEditor,
  Color,
  ColorGroup,
  AnySelect,
  AnyRange,
  Grid,
  GridItem,
  Form,
  GroupForm,
  Popper,
  Upload,
  FileView,
  Table,
  Dom,
  RichText,
  CheckGroup,
  GroupTable,
]
const install = (app: App, options) => {
  init(app, options)
  components.forEach(component => {
    app.component(component.name, component)
  })
}

function init (app, options) {
  app.config.globalProperties.prefix = options?.prefix || 'el'
  app.config.globalProperties.$style = {}
  app.config.globalProperties.upload = options?.upload
  useStyled(app.config.globalProperties)
}

export {
  CodeEditor,
  Color,
  ColorGroup,
  AnySelect,
  AnyRange,
  GridItem,
  Grid,
  Form,
  GroupForm,
  GroupTable,
  Popper,
  FileView,
  Upload,
  Table,
  utils,
  RichText,
  CheckGroup,
  Dom,
  init,
  install,
}
export default {
  install,
}