import { getClassNames } from '@websolutespa/bom-core';
import { ComponentPropsWithRef, ReactNode, SVGProps, forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { CssDefault } from '../../components/button/button.variants';
import { UIComponentWithRef, UIStyledComponentProps } from '../../components/types';
import { getCssResponsive } from '../../components/utils';
import { SizeVariant } from '../../variants';
import { FormControlCss } from '../styles';

type Props = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
  size?: SizeVariant;
  children?: ReactNode;
};

export type RadioOptionProps = UIStyledComponentProps<Props, 'input'>;

export type RadioOptionComponent<C extends React.ElementType = 'input'> = UIComponentWithRef<C, Props>;

const RadioOptionDisabledSvg = (props: SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none" stroke="currentColor" {...props}>
    <line x1="0" y1="100" x2="100" y2="0" vectorEffect="non-scaling-stroke"></line>
  </svg>
);

const RadioOptionDisabled = styled(RadioOptionDisabledSvg)`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;

  border: var(--form-border);
  border-width: var(--form-border-width);
  border-color: var(--form-border-color-disabled);
  border-radius: var(--form-border-radius);
  color: var(--form-border-color-disabled);

  input:disabled ~ &,
  input.disabled ~ & {
    display: block;
  }
`;

const StyledRadioOptionInput = styled.div`
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;

  &:disabled {
    cursor: not-allowed;
  }
`;

const StyledRadioOptionButton = styled.div<RadioOptionProps>`
  ${CssDefault}
  ${FormControlCss}

  width: 100%;
  justify-content: center;

  input:not(:disabled):hover ~ & {
    border-color: var(--form-border-color-hover);
    color: var(--form-color-hover);
  }

  input:focus ~ &,
  input:active ~ & {
    outline-color: var(--form-outline-color-focus);
  }

  input:checked ~ &,
  input.active ~ & {
    outline-color: var(--form-outline-color-active);
    background: red;
  }

  input:disabled ~ &,
  input.disabled ~ & {
    background: var(--form-background-color-disabled);
    color: var(--form-color-disabled);
    pointer-events: none;
  }

  ${props => (css`font-size: var(--button-size-${props.size || 'md'});`)}
  ${props => getCssResponsive(props)}
`;

const StyledRadioOption = styled.div<RadioOptionProps>`
  position: relative;
  display: flex;
  min-height: 3.8em;
  line-height: 1;

  ${props => (css`
  &, .line {
    font-size: var(--button-size-${props.size || 'md'});
  }
  `)}
  ${props => getCssResponsive(props)}
`;

export const RadioOptionBase: RadioOptionComponent = forwardRef(({
  as = 'input',
  children,
  className,
  ...props
}, ref) => {
  const classNames = getClassNames('radio-option', className);
  return (
    <StyledRadioOption size={props.size} className={classNames}>
      <StyledRadioOptionInput ref={ref} as={as} type="radio" {...props} />
      <StyledRadioOptionButton as="button" size={props.size}>
        <span>{children}</span>
      </StyledRadioOptionButton>
      <RadioOptionDisabled className="line" />
    </StyledRadioOption>
  );
});

RadioOptionBase.displayName = 'RadioOption';