import { consoleWarn, getClassNames } from '@websolutespa/bom-core';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Ellipsis } from '../../components';
import { useCustomSelectContext } from './custom-select-context';

type Props = {
  disabled?: boolean;
  divider?: boolean;
  label?: boolean;
  className?: string;
  preventAllEvents?: boolean;
  value: string;
};

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;

export type CustomSelectOptionProps = Props & NativeAttrs;

const StyledCustomSelectOption = styled.div`
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  margin: 0;
  user-select: none;
  border: 0;
  color: var(--form-color-disabled);
  transition: background-color 0.2s ease 0s, border-color 0.2s ease 0s, outline-color 0.2s ease 0s;
  cursor: pointer;

  &.divider {
    line-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--form-border-color);
    width: 100%;
    height: 1px;
    padding: 0;
    margin: 0;
  }

  &.label {
    color: var(--form-color);
    border-bottom: 1px solid var(--form-border-color);
    text-transform: capitalize;
    font-size: 0.875em;
    width: 100%;
    font-weight: 500;
    text-transform: uppercase;
    cursor: default;
  }

  &.disabled {
    background-color: var(--form-background-color-disabled);
    color: var(--form-color-disabled);
    cursor: not-allowed;
  }

  &:hover:not(.disabled):not(.label):not(.active) {
    background-color: var(--form-border-color);
    color: var(--form-color-hover);
  }

  &.active {
    background-color: var(--form-outline-color-active);
    color: var(--color-neutral-100);
  }
`;

export const CustomSelectOption: React.FC<React.PropsWithChildren<CustomSelectOptionProps>> = ({
  disabled = false,
  divider = false,
  label = false,
  className = '',
  preventAllEvents = false,
  value: valueProp,
  children,
  ...props
}: React.PropsWithChildren<CustomSelectOptionProps>) => {

  const { updateValue, value, disableAll } = useCustomSelectContext();

  const isDisabled = useMemo(() => disabled || disableAll, [disabled, disableAll]);

  const isLabel = useMemo(() => label || divider, [label, divider]);

  if (!isLabel && valueProp === undefined) {
    consoleWarn('The props "value" is required.', 'CustomSelect Option');
  }

  const optionValue: string = valueProp || children as string || '';

  const active = useMemo(() => {
    if (!value) {
      return false;
    }
    if (typeof value === 'string') {
      return optionValue === value;
    }
    return value.includes(`${optionValue}`);
  }, [optionValue, value]);

  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
    if (preventAllEvents) {
      return;
    }
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    event.preventDefault();
    if (isDisabled || isLabel) {
      return;
    }
    updateValue && updateValue(optionValue);
  };

  const classNames = getClassNames('option', { divider, label, active }, className);

  return (
    <StyledCustomSelectOption className={classNames} onClick={clickHandler} {...props}>
      <Ellipsis>{children}</Ellipsis>
    </StyledCustomSelectOption>
  );
};

CustomSelectOption.displayName = 'CustomSelectOption';