import React from 'react';
import styled, { css } from 'styled-components';
// import { StandardOptionsType } from '@bjsdistribution/dms-component-library';
import RadioButton from './RadioButton';
import {
  DirectionType,
  RadioButtonGroupProps,
  RequiredTextProps,
  fonts,
} from './types';

type StandardOptionsType = {
  label: string;
  value: any;
  color?: string;
};

function RadioButtonGroup(props: RadioButtonGroupProps) {
  const {
    heading,
    direction = 'horizontal',
    required = true,
    options,
    onChange,
  } = props;

  function renderOptions() {
    return options?.map((option: StandardOptionsType, index: number) => {
      const { label, value, color } = option;
      const shortenedOptionLabel = label?.replace(/\s+/g, '');
      const optionId = `radio-option-${shortenedOptionLabel}`;

      return (
        <>
          <RadioButton
            value={value}
            label={label}
            key={optionId}
            id={optionId}
            name={heading.replace(/ /g, '-').toLowerCase()}
            checked={props.selectedValue == value}
            onChange={onChange}
            color={color}
          />
          {options.length - 1 !== index && <Separator />}
        </>
      );
    });
  }
  return (
    <Fieldset>
      <LegendContainer>
        <Legend>{heading}</Legend>
        {required && (
          <RequiredText $required={required || false}>*</RequiredText>
        )}
      </LegendContainer>
      <Wrapper $direction={direction} className="custom-wrapper">
        {renderOptions()}
      </Wrapper>
    </Fieldset>
  );
}

const Separator = styled.div`
  width: 1px;
  background: #e0e2e7;
`;

const labelStyles = css`
  color: #6a7378;
  font-size: 14px;
  font-weight: 400;
  font-family: ${fonts.secondary};
  line-height: 20px;
`;

const RequiredText = styled.span<RequiredTextProps>`
  ${props => !props.$required && 'visibility: hidden;'}
  ${labelStyles}
`;

const LegendContainer = styled.div`
  display: flex;
`;

const Legend = styled.legend`
  color: #6a7378;
  font-size: 14px;
  font-weight: 400;
  font-family: ${fonts.secondary};
  line-height: 20px;
`;

const Fieldset = styled.fieldset`
  border: none;
  padding: 0px;
`;

const Wrapper = styled.div<{ $direction: DirectionType }>`
  display: flex;
  flex-direction: ${props =>
    props.$direction === 'horizontal' ? 'row' : 'column'};
  gap: 20px;
  padding: 0px 10px;
  border-radius: 15px;
  border: 1px solid #e0e2e7;
  background: #fff;
  height: 30px;
  justify-content: space-evenly;
`;

export default RadioButtonGroup;
