import { styled } from '~/styles';
import { theme } from '~/styles/theme';

export const TableWrapper = styled.div`
  margin: 0;
  padding: 0;
`;

export const Table = styled.table`
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  min-width: 100%;
`;

export const TableBody = styled.tbody`
  margin: 0;
  padding: 0;
`;

export const TableHeader = styled.thead`
  margin: 0;
  padding: 0;
`;

export const TableRow = styled.tr`
  margin: 0;
  padding: 0;
  color: ${theme.colors.gray[1]};
  border-bottom: 2px solid ${theme.colors.gray[4]};
  cursor: ${({ onClick }) => (onClick ? 'pointer' : null)};
  &.selected,
  &:hover {
    td {
      background-color: ${theme.colors.gray[4]};
    }
  }

  &.hide {
    display: none;
  }

  &:hover {
    .showOnHover {
      opacity: 1;
      pointer-events: all;
    }
  }
`;

export const TableColumnHeader = styled.th`
  margin: 0;
  padding: ${(props: { padding?: string }) => props.padding || '10px 15px'};
  text-align: left;
  color: ${theme.colors.gray[2]};
  line-height: ${theme.lineHeights.lessTight};
`;

interface TableColumnProps {
  padding?: string;
  lineHeight?: string;
  textAlign?: string;
}

export const TableColumn = styled.td`
  margin: 0;
  padding: ${(props: TableColumnProps) => props.padding || '3px 15px'};
  white-space: nowrap;
  line-height: ${(props: TableColumnProps) => props.lineHeight || 'initial'};
  text-align: ${(props: TableColumnProps) => props.textAlign || 'left'};

  .canEdit {
    cursor: pointer;
  }

  .editIcon {
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover {
    .editIcon {
      opacity: 1;
    }
  }

  .showOnHover {
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
  }
`;
