import { createGlobalStyle, css } from 'styled-components';
import { rgba } from '../../_utils/color-tool';
import checkboxStyle from './checkbox';
import inputStyle from './input';
export const dropdownShadow = css `
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
`;
export const centeredShadow = css `
  box-shadow: 0 0px 6px -4px rgba(0, 0, 0, 0.12),
    0 0px 16px 0 rgba(0, 0, 0, 0.08), 0 0px 28px 8px rgba(0, 0, 0, 0.05);
`;
/// Ag-Grid全局样式
const agGridGlobalStyle = css `
  .data-table {
    margin-top: 20px;
    padding: 0 20px;

    /** 定制表格内输入框高度 */
    .ant-input-number-input {
      height: 26px !important;

      vertical-align: baseline !important;

      line-height: 26px !important;
    }
  }

  .ag-theme-alpine.ag-theme-alpine {
    .ag-pinned-right-cols-container,
    .ag-horizontal-right-spacer,
    .ag-pinned-right-header,
    .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell) {
      border-left-color: ${({ theme }) => theme.agGrid.header.bg};
      box-shadow: ${({ theme }) => rgba(theme.background.system, 0.2)} -4px 0 4px
        0;
    }

    .ag-pinned-left-cols-container,
    .ag-horizontal-left-spacer,
    .ag-pinned-left-header,
    .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
      z-index: 1;

      border-right-color: ${({ theme }) => theme.agGrid.header.bg};
      box-shadow: ${({ theme }) => rgba(theme.background.system, 0.2)} 4px 0 4px
        0;
    }

    .ag-cell,
    .ag-header-cell,
    .ag-header-group-cell {
      padding-left: 12px;
      padding-right: 12px;
    }

    .ag-root-wrapper,
    .ag-header,
    .ag-header-cell.ag-header-cell.ag-header-cell,
    .ag-row {
      border-color: ${({ theme }) => theme.agGrid.border};
      background-color: ${({ theme }) => theme.agGrid.header.bg};
    }

    .ag-body-viewport {
      background-color: ${({ theme }) => theme.agGrid.viewport.bg};

      .ag-pinned-right-cols-container {
        .ag-cell-focus {
          border-color: transparent;
        }
      }
    }

    .ag-row:last-child {
      border-bottom: none;
    }

    color: ${({ theme }) => theme.text.secondary};

    .ag-header-row {
      color: ${({ theme }) => theme.text.secondary};
    }

    .ag-row-odd {
      &,
      & .ag-cell-inline-editing {
        background-color: ${({ theme }) => theme.agGrid.odd.bg};
      }
    }

    .ag-row-even {
      &,
      & .ag-cell-inline-editing,
      .ag-center-cols-viewport {
        background-color: ${({ theme }) => theme.agGrid.even.bg};
      }
    }

    .ag-row {
      color: ${({ theme }) => theme.text.primary};

      .ag-cell {
        &,
        & .ag-cell-value {
          color: ${({ theme }) => theme.text.primary};
        }
      }

      &.ag-row-hover,
      &.ag-row-focus {
        background-color: ${({ theme }) => theme.agGrid.highlight.bg};
      }
    }

    .ag-header-row,
    .ag-header-cell.ag-header-cell-moving,
    .ag-header-group-cell.ag-header-cell-moving,
    .ag-header-viewport,
    .ag-root-wrapper {
      background-color: ${({ theme }) => theme.agGrid.header.bg};
    }

    .ag-header-cell.ag-header-cell-moving,
    .ag-header-group-cell.ag-header-cell-moving {
      background-color: ${({ theme }) => theme.background.content.primary};
    }

    .ag-header-cell-resize::after {
      width: 1px;
      background-color: ${({ theme }) => theme.agGrid.resizer};
      transition-property: background-color;
    }

    .ag-row .ag-cell.ag-operation-cell,
    .ag-header .ag-header-cell.ag-operation-header {
      padding: 0 20px;
    }

    .ag-floating-filter-button.ag-floating-filter-button {
      margin-left: 10px;

      .ag-floating-filter-button-button {
        box-shadow: none;
      }
    }

    .ag-icon {
      color: ${({ theme }) => theme.text.secondary};

      &.ag-icon-grip {
        margin-left: -3px;
        margin-right: -4px;
      }

      &.ag-icon-menu {
        &:hover {
          color: ${({ theme }) => theme.main};
        }
      }
    }

    .ag-cell-inline-editing {
      height: 39px;
      box-shadow: none;
    }

    .ag-center-cols-container {
      background-color: ${({ theme }) => theme.agGrid.odd.bg};
    }

    ${inputStyle}
    ${checkboxStyle}
  }

  .ag-dnd-ghost.ag-dnd-ghost {
    background: ${({ theme }) => theme.agGrid.header.bg};
    ${centeredShadow};
    border: 1px solid ${({ theme }) => theme.border.secondary};
    height: 35px !important;
    line-height: 35px;
  }

  .ag-dnd-ghost-icon.ag-dnd-ghost-icon,
  .ag-icon.ag-icon .ag-icon-eye-slash,
  .ag-dnd-ghost-label {
    color: ${({ theme }) => theme.text.primary};
  }

  .ag-popup {
    .ag-menu.ag-menu.ag-popup-child {
      ${centeredShadow};
      border-color: ${({ theme }) => theme.border.secondary};
      background-color: ${({ theme }) => theme.background.content.secondary};
      color: ${({ theme }) => theme.text.primary};

      .ag-filter-body-wrapper.ag-simple-filter-body-wrapper {
        background-color: ${({ theme }) => theme.background.content.secondary};

        .ag-wrapper.ag-picker-field-wrapper {
          height: 30px;
          border-radius: 2px;
          color: ${({ theme }) => theme.text.primary};
          background-color: ${({ theme }) => theme.background.content.primary};
          border-color: ${({ theme }) => theme.select.border};

          &:focus {
            box-shadow: none;
          }

          &:hover,
          &:active,
          &:focus {
            border-color: ${({ theme }) => theme.main};
          }

          .ag-icon.ag-icon-small-down {
            color: ${({ theme }) => theme.select.arrow};
          }
        }
      }
    }

    .ag-list {
      background-color: ${({ theme }) => theme.picker.dropdown};

      &.ag-list {
        border-radius: 2px;
        ${dropdownShadow};
      }

      .ag-list-item {
        color: ${({ theme }) => theme.text.primary};
        height: 32px;
        padding-left: 16px;
        padding-right: 16px;

        &.ag-active-item {
          color: ${({ theme }) => theme.main};
          background-color: ${({ theme }) => theme.select.selected};
        }
      }
    }

    ${inputStyle}
  }
`;
const AgGridGlobalStyle = createGlobalStyle `${agGridGlobalStyle}`;
export default AgGridGlobalStyle;
