/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import {theme, paddings} from 'components/shared/theme';
import {IInput} from '../input';

const formInputWidth = 350;
const {spacing, primaryFontSize, colors, fontSizeS} = theme;

export const ComponentWrapper = styled.default.div<{width: number | string}>`
  position: relative;
  width: ${({width}) => (width && isNaN(+width) ? width : (width || formInputWidth) + 'px')};
  display: flex;
  flex-direction: column;
`;

export const RadioGroup = styled.default.div<{color?: string}>`
  display: flex;
  flex-direction: column;
  margin-top: ${spacing.small} 0;
  label {
    font-size: ${fontSizeS};
    color: ${({color}) => color};
    cursor: pointer;
  }
`;

export const RadioWrapper = styled.default.div<{disabled?: boolean}>`
  padding: ${paddings.small};
  display: flex;

  ${({disabled}) =>
    disabled &&
    styled.css`
      pointer-events: none;
      opacity: 0.5;
    `}
`;

export const RadioButtonContainer = styled.default.div`
  margin-right: ${spacing.xSmall};
  align-self: center;

  input {
    position: absolute;
    visibility: hidden;
  }
`;

export const VisibleRadioButton = styled.default.div<{checked?: boolean}>`
  border: 2px solid ${colors.gray400};
  display: flex;
  align-items: center;
  justify-content: center;
  width: ${primaryFontSize};
  height: ${primaryFontSize};
  border-radius: 50%;
  cursor: pointer;

  ${({checked}) =>
    checked &&
    styled.css`
      border: none;
      background-color: ${colors.red};

      div {
        background-color: ${colors.black};
        width: 5px;
        height: 5px;
        border-radius: 50%;
      }
    `}
`;

export const HelperText = styled.default.p<IInput>`
  color: ${({error}) => (error ? colors.lightRed : colors.gray600)};
  font-weight: 400;
  font-size: ${fontSizeS};
  margin-top: ${spacing.xxSmall};
`;
