import React from "react";
import "./index.scss";
import CustomCheckbox from "../../../components/CustomCheckbox";
import CircleRoundedIcon from "@mui/icons-material/CircleRounded";
import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded";
import { connect } from "react-redux";

function SubscribeRadio({ data, selectedSubscripe }: any) {
  return (
    <div
      className={
        "subscribe-radio d-flex" +
        " " +
        (selectedSubscripe.id === data.id ? "subscribe-radio-active" : "")
      }
    >
      <div className="subscribe-radio__name d-flex align-items-center">
        <CustomCheckbox
          icon={
            <RadioButtonUncheckedRoundedIcon
              style={{ color: "#707070", fontSize: 50, padding: 0 }}
            />
          }
          checkedIcon={
            <CircleRoundedIcon
              style={{ color: "white", fontSize: 50, padding: 0 }}
            />
          }
        />
        <h2>{data.name}</h2>
      </div>
      <div className="subscribe-radio__factor d-flex flex-column justify-content-center">
        {data.offPercent !== 0 && (
          <div className="subscribe-radio__factor--off d-flex align-items-center">
            <b>{data.off}<span></span></b>
            <i>تومان</i>
          </div>
        )}
        <div className="subscribe-radio__factor--finalPrice d-flex align-items-center">
          <strong>{data.finalPrice}</strong>
          <i>تومان</i>
        </div>
        {data.offPercent !== 0 && (
          <span className="subscribe-radio__factor--tag">{`${data.offPercent}% تخفیف ویژه`}</span>
        )}
      </div>
    </div>
  );
}

export default connect(
  (state: any) => ({
    selectedSubscripe: state.publicApi.selectedSubscripe,
  }),
  {}
)(SubscribeRadio);
