import { createStyles } from '@/theme'
import { useScrollStyle } from '@/hooks/useScrollStyle'

export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
  const prefix = `${prefixCls}-${token?.proPrefix}-edit-component`
  const { scrollbarBackground } = useScrollStyle()
  const container = css`

    --heaer-height: 65px;
    --footer-height: 50px;
    
    position: relative!important;
    
    .ant-layout-sider-children{
      //display: flex;

    }
    
    .ant-menu{

      border-inline-end: none!important;
    }
    
    .ant-menu .ant-menu-item, .ant-menu .ant-menu-submenu, .ant-menu .ant-menu-submenu-title {
      border-radius: 0;
      margin: 0;
      width: 100%;
      flex: 1;
      min-width: 200px;
    }
    
    .ant-drawer-content{
      --heaer-height: 65px;
      --footer-height: 50px;
    }
    
    .ant-modal-content{
      --heaer-height: 57px;
      --footer-height: 50px; 
    }
    
  `
  const sider = css`
    .ant-layout-sider-children {
      display: flex;
      overflow-y: auto;
      overflow-x: hidden;
      position: fixed !important;
      //top: 0;
      //bottom: 0;
      border-inline-end: 1px solid rgba(5, 5, 5, 0.06);
      height: calc(100% - var(--heaer-height, 0) - var(--footer-height, 0));

      z-index: 10;
      ${scrollbarBackground}

    } 

  `

  const body = css`
    //padding: 30px;
    overflow-x: hidden;
    flex: 1; 
    gap: 1px;
    
    .ant-pro-form-group-title{
      margin-block-end: 10px;
      font-size: 16px;
      border-bottom: 1px solid #f0f0f0;
      padding-block-end: 10px;
    }
    
    .ant-form-item-control-input{
      .ant-pro-card-body{
        padding: 0;
      }
    }
    
  `

  return {
    container: cx(prefix, props?.className, container),
    body,
    sider,
  }
})