import * as React from 'react';

import styled from '@emotion/styled';
import { Checkbox as CheckboxBase, CheckboxProps } from '@lightspeed/flame/Checkbox';
import { Flex, Box } from '@lightspeed/flame/Core';
import { Text } from '@lightspeed/flame/Text';
import { themeGet } from '@styled-system/theme-get';

import { Th, Td, Tr, TrProps } from '../../../components/Table';
import BulkButton from './BulkButton';
import { Dropdown, DropdownList } from './Dropdown';

const Addon = styled(Flex)`
  border: 1px solid ${themeGet('buttonVariants.fill.neutral.borderColor')};
  border-top-left-radius: ${themeGet('radii.radius-1')};
  border-bottom-left-radius: ${themeGet('radii.radius-1')};
`;

// Nasty hack
const Checkbox = styled(CheckboxBase)`
  padding: 6px;
  input {
    height: 16px;
  }
  input + div {
    margin-right: 0px;
  }
`;

const Group = styled(Flex)`
  ${BulkButton as any} {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
  }
`;

export const BatchCheckbox: React.FC<React.ComponentPropsWithoutRef<'input'>> = ({
  children,
  ...restProps
}) => (
  <Flex alignItems="center">
    <Checkbox {...restProps as any} />
    <Box pl={1}>{children}</Box>
  </Flex>
);

interface CheckboxWellProp extends React.ComponentPropsWithoutRef<'input'> {
  selectedItemsText: React.ReactNode;
  innerGroup: React.ReactNode;
  outerGroup: React.ReactNode;
  css: any;
}
export const CheckboxWell: React.FC<CheckboxWellProp> = ({
  selectedItemsText,
  innerGroup,
  outerGroup,
  ...restProps
}) => (
  <Flex alignItems="center" ml="-0.4em">
    <Group alignItems="stretch">
      <Addon ml="-1px" bg="dimmed" alignItems="center">
        <Checkbox {...restProps} />
        <Text color="textBody" fontSize="xsmall" pl={1} pr={2}>
          {selectedItemsText}
        </Text>
      </Addon>
      {innerGroup}
    </Group>
    {outerGroup}
  </Flex>
);

const ModdedTr = styled(Tr)<TrProps>`
  td:nth-of-type(2),
  th:nth-of-type(2) {
    padding-left: 0;
  }

  /*
    yolo
    this is what happens when you have random style changes across features + feature existence...
  */
  th:nth-of-type(2) > .cr-table-icon-button {
    margin-left: -6px;
  }
`;

interface BatchSelectHeaderTrProps {
  selectedItemsText: React.ReactNode;
  innerGroup?: React.ReactNode;
  outerGroup?: React.ReactNode;
  itemsSelectedCount: number;
  checkboxProps: CheckboxProps;
}
export const BatchSelectHeaderTr: React.FC<BatchSelectHeaderTrProps> = ({
  itemsSelectedCount,
  selectedItemsText,
  innerGroup,
  outerGroup,
  checkboxProps,
  children,
  ...restProps
}) => {
  return !itemsSelectedCount ? (
    <ModdedTr {...restProps}>
      {React.Children.map(children, (child, index) => {
        if (index === 0) {
          return (
            <React.Fragment>
              <Th pl={2} pr={0} py={1} width="20px">
                <BatchCheckbox {...checkboxProps as any} />
              </Th>
              {child}
            </React.Fragment>
          );
        }

        return child;
      })}
    </ModdedTr>
  ) : (
    <Tr {...restProps}>
      <Th py={1} colSpan={100}>
        <CheckboxWell
          selectedItemsText={selectedItemsText}
          innerGroup={innerGroup}
          outerGroup={outerGroup}
          {...checkboxProps as any}
        />
      </Th>
    </Tr>
  );
};

interface BatchSelectTrProps extends TrProps {
  checkboxProps: CheckboxProps;
}
export const BatchSelectTr: React.FC<BatchSelectTrProps> = ({
  checkboxProps,
  children,
  ...restProps
}) => (
  <ModdedTr {...restProps}>
    {React.Children.map(children, (child, index) => {
      if (index === 0) {
        return (
          <React.Fragment>
            <Td pl={2} pr={0} width="20px">
              <BatchCheckbox {...checkboxProps as any} />
            </Td>
            {child}
          </React.Fragment>
        );
      }

      return child;
    })}
  </ModdedTr>
);

export { Dropdown, DropdownList, BulkButton };