import React from 'react';
import { styled } from '@mui/material/styles';
import MuiRadio, { RadioProps } from '@mui/material/Radio';

const CustomRadio = styled(MuiRadio)(({ theme }) => ({
  padding: 0,
  '&.Mui-disabled': {
    opacity: 0.38,
  },
  '&.Mui-focusVisible:after': {
    content: '""',
    position: 'absolute',
    display: 'block',
    width: 24,
    height: 24,
    borderRadius: '50%',
    border: `1px solid ${theme.palette.lunit_token.core.status_focused}`,
  },
}));

const DefaultIcon = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
        fill="#99999B"
      />
    </svg>
  );
};

const CheckedIcon = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15ZM10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z"
        fill="#00C9EA"
      />
    </svg>
  );
};

const Radio = (props: RadioProps) => {
  return (
    <CustomRadio disableRipple icon={<DefaultIcon />} checkedIcon={<CheckedIcon />} {...props} />
  );
};

export default Radio;