import styled from 'styled-components';
import { SessionRadio } from '../basic/SessionRadio';
import { PanelButton, PanelButtonProps, PanelButtonText, StyledContent } from './PanelButton';

const StyledPanelButton = styled(PanelButton)`
  padding-top: var(--margins-lg);
  padding-bottom: var(--margins-lg);
  text-align: start;
`;

const StyledCheckContainer = styled.div`
  display: flex;
  align-items: center;
`;

interface PanelRadioButtonProps extends Omit<PanelButtonProps, 'children' | 'onClick'> {
  value: any;
  text: string;
  subtitle?: string;
  isSelected: boolean;
  onSelect?: (...args: Array<any>) => void;
  onUnselect?: (...args: Array<any>) => void;
}

export const PanelRadioButton = (props: PanelRadioButtonProps) => {
  const {
    value,
    text,
    subtitle,
    isSelected,
    onSelect,
    onUnselect,
    disabled = false,
    dataTestId,
  } = props;

  return (
    <StyledPanelButton
      disabled={disabled}
      onClick={() => {
        return isSelected ? onUnselect?.('bye') : onSelect?.('hi');
      }}
      dataTestId={dataTestId}
    >
      <StyledContent disabled={disabled}>
        <PanelButtonText text={text} subtitle={subtitle} />
        <StyledCheckContainer>
          <SessionRadio
            active={isSelected}
            value={value}
            inputName={value}
            label=""
            disabled={disabled}
          />
        </StyledCheckContainer>
      </StyledContent>
    </StyledPanelButton>
  );
};