import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { themeGet } from '@styled-system/theme-get';

import { IconChevronLeft } from '@lightspeed/flame/Icon/ChevronLeft';
import { IconChevronRight } from '@lightspeed/flame/Icon/ChevronRight';
import { Box, Flex, FlameFlexProps } from '@lightspeed/flame/Core';
import { Text, TextProps } from '@lightspeed/flame/Text';
import { Divider } from '@lightspeed/flame/Divider';
import { FilterContext, useDropdownRouting, useFilteringActions } from './FilterContext';

const noop = () => {};

function isChildASection(child: any) {
  return child && child.type && child.type.__section; // eslint-disable-line
}

interface DropdownSectionProps {
  filterKey: string;
  title?: string;
}
export const DropdownSection: React.FC<DropdownSectionProps> = ({ filterKey, children }) => {
  const { applyFilter, deleteFilter, initialValues } = useFilteringActions(filterKey);
  const { goBack } = useDropdownRouting();

  return typeof children === 'function'
    ? children({ applyFilter, deleteFilter, goBack }, initialValues)
    : children;
};

// This is used as an internal identfier to determine whether to render a list or a detail view
// TODO: Remove this while internal identifier thing. It's not good when using mdx rendering...
// @ts-ignore
DropdownSection.__section = true; // eslint-disable-line

interface DropdownButtonLinkProps
  extends Omit<TextProps, 'color'>,
    React.ComponentPropsWithRef<'button'> {
  css?: any;
}
export const DropdownButtonLink = styled(Text)<any>`
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 0;
  padding: 0;
  font-family: ${themeGet('fontFamily.sans-serif')};
  background: transparent;
`.withComponent('button') as React.FC<DropdownButtonLinkProps>;

DropdownButtonLink.defaultProps = {
  color: 'secondary',
  fontSize: 'small',
  fontWeight: 'bold',
};

interface GoToListViewButtonProps {
  text: string;
}
const GoToListViewButton: React.FC<GoToListViewButtonProps> = ({ text = 'Go Back' }) => {
  const { goBack } = useDropdownRouting();
  return (
    <DropdownButtonLink onClick={goBack}>
      <IconChevronLeft color="secondary" />
      {text}
    </DropdownButtonLink>
  );
};

const ListViewFlex = styled(Flex)`
  cursor: pointer;
  transition: background-color ease-in 100ms;

  &:hover {
    background-color: ${themeGet('tableStyles.dropdown.hover.background')};
    svg {
      fill: ${themeGet('colors.secondary')};
    }
  }
`;

// TODO: Remove the child section thinggy in favour of using a plain old object mapping
// for routes... This will make typing things a lot easier
// @ts-ignore
const ListView: React.FC = ({ children }) => {
  const { goToFilter } = useDropdownRouting();

  const nextChildren = React.Children.map(children, (child: any) => {
    if (isChildASection(child)) {
      const childTitle = child.props.title || '';
      const filterKey = child.props.filterKey || '';

      return (
        <ListViewFlex
          py={1}
          alignItems="center"
          justifyContent="space-between"
          onClick={() => goToFilter(filterKey)}
          {...child.props}
        >
          <DropdownButtonLink ml={3}>{childTitle}</DropdownButtonLink>
          <Box mr={3}>
            <IconChevronRight color="textDimmed" />
          </Box>
        </ListViewFlex>
      );
    }

    return child;
  });

  return nextChildren;
};

ListView.propTypes = {
  children: PropTypes.any, // eslint-disable-line
};

interface DetailsView {
  goBackText: string;
}
const DetailsView: React.FC<DetailsView> = ({ goBackText, children }) => {
  const { isBackButtonHidden } = useDropdownRouting();
  const { selectedSection } = React.useContext(FilterContext);

  const nextChild = React.Children.map(children, (child: any) => {
    if (isChildASection(child)) {
      return selectedSection === child.props.filterKey && child;
    }

    return null;
  });

  return (
    <React.Fragment>
      {!isBackButtonHidden() && (
        <Box mx={1} mb={1}>
          <GoToListViewButton text={goBackText} />
        </Box>
      )}
      {nextChild}
    </React.Fragment>
  );
};

interface FilterDropdownProps {
  goBackText: string;
}
export const FilterDropdown: React.FC<FilterDropdownProps> = ({
  goBackText,
  children,
  ...restProps
}) => {
  const { selectedSection } = useDropdownRouting();

  return (
    <Box my={2} {...restProps}>
      {selectedSection ? (
        <DetailsView goBackText={goBackText}>{children}</DetailsView>
      ) : (
        <ListView>{children}</ListView>
      )}
    </Box>
  );
};

export const DropdownDivider: React.FC = ({ ...restProps }) => (
  <Divider mt={2} mb={2} {...restProps} />
);

export const DropdownActions: React.FC = ({ children, ...restProps }) => (
  <Flex justifyContent="space-between" alignItems="center" mx={2} mb={2} {...restProps}>
    {children}
  </Flex>
);

export const DropdownContent: React.FC<FlameFlexProps> = ({ children, ...restProps }) => (
  <Flex mx={3} {...restProps}>
    {children}
  </Flex>
);

interface DropdownResetAllProps {
  onClick: () => void;
  children: React.ReactNode & ((count: number) => React.ReactNode);
}
export const DropdownResetAll: React.FC<DropdownResetAllProps> = ({
  onClick = noop,
  children,
  ...restProps
}) => {
  const { deleteAllFilters, getFiltersCount } = React.useContext(FilterContext);

  return (
    <DropdownButtonLink
      onClick={() => {
        onClick();
        deleteAllFilters();
      }}
      {...restProps}
    >
      {typeof children === 'function' ? children(getFiltersCount()) : children}
    </DropdownButtonLink>
  );
};

export const DropdownTitle: React.FC = ({ children, ...restProps }) => (
  <Text fontWeight="bold" mx={2} mb={2} {...restProps}>
    {children}
  </Text>
);