import styled, { css } from 'styled-components';
import { getColorAlias, getSpacing, getFontSize, getModifiedColorByThemeMode, convertToTransientProps } from '../../utils/index.js';

const DataTableWrapper = styled.div `
  display: flex;
  flex-flow: column;
  overflow: hidden;
  border-radius: ${(props) => props.theme.radius.roundedC};
  border: 1px solid ${getColorAlias('borderDefault')};
  background-color: ${getColorAlias('containerDefault')};
  color: ${getColorAlias('contentDefault')};
`;
const Header = styled.header `
  display: flex;
  flex-flow: column;
  padding: ${getSpacing('s04')};

  ${({ headerVariant }) => headerVariant === 'strong' &&
    css `
      background-color: ${getColorAlias('supportBrand02')};
    `};

  h2 {
    ${({ variant }) => variant === 'wide' ? getFontSize('size24') : getFontSize('size20')}
    margin: unset;
  }

  p {
    margin: ${getSpacing('s02')} 0 0 0;
  }
`;
const ResponsiveTableWrapper = styled.div `
  display: block;
  overflow-x: auto;

  ${({ theme }) => theme.mode === 'light' &&
    css `
      /* Shadow if content is scrollable */
      background: linear-gradient(to right, white, white),
        linear-gradient(to right, white, white),
        linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3)),
        linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.3));

      background-position: left center, right center, left center, right center;
      background-repeat: no-repeat;
      background-color: white;
      background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
      background-attachment: local, local, scroll, scroll;
    `};
`;
const Table = styled.table `
  border-collapse: collapse;
  width: 100%;

  th,
  td {
    ${getFontSize('size16')}
    padding: ${getSpacing('s04')};
    border-bottom: 1px solid ${getColorAlias('borderDefault')};
    vertical-align: top;
  }

  tr {
    &:hover:not(thead > tr) {
      background-color: ${getModifiedColorByThemeMode('hover01', 'containerDefault')};
    }

    &[data-selected=\"true\"] {
      background-color: ${getColorAlias('containerStrong')};
    }

    &[data-disabled=\"true\"] {
      color: ${getColorAlias('contentDisabled')};
    }
  }
`;
const Th = styled.th.withConfig({
    shouldForwardProp: convertToTransientProps(['textAlign', 'columnWidth']),
}) `
  text-align: ${({ textAlign }) => textAlign || 'left'};
  width: ${({ columnWidth }) => columnWidth || 'auto'};
  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
`;
const Td = styled.td.withConfig({
    shouldForwardProp: convertToTransientProps(['textAlign']),
}) `
  text-align: ${({ textAlign }) => textAlign || 'left'};
  vertical-align: middle;
`;
const ThContainer = styled.div `
  display: flex;
  justify-content: space-between;
  max-height: 48px;
  width: 100%;
  align-items: center;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    height: inherit;
    width: inherit;
  }

  svg {
    margin-left: ${getSpacing('s02')};
    min-height: 20px;
    min-width: 20px;
  }
`;
const CheckboxCell = styled.span `
  width: 40px;
  padding: calc(${getSpacing('s04')} + 2px) 0 ${getSpacing('s04', 's04')} !important;
`;
const ActionBar = styled.div `
  ${getFontSize('size16')}
  display: flex;
  background-color: ${getColorAlias('containerInverse')};
  color: ${getColorAlias('contentInverse')};
  padding: ${getSpacing('s02', 's04')};
  align-items: center;
  justify-content: space-between;
`;
const SelectedItemsInfo = styled.div `
  ${getFontSize('size16')}
`;
const ActionButtons = styled.div `
  display: flex;

  button:not(:last-child) {
    margin-right: ${getSpacing('s04')};
  }
`;
const Footer = styled.footer `
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: ${getSpacing('s02', 's04')};
`;
const ResultsArea = styled.div `
  ${getFontSize('size14')}
  margin-right: ${getSpacing('s04')};
`;

export { ActionBar, ActionButtons, CheckboxCell, DataTableWrapper, Footer, Header, ResponsiveTableWrapper, ResultsArea, SelectedItemsInfo, Table, Td, Th, ThContainer };
