gk_se_web_report/src/_components/boxChart/BoxDoughnutBarChart.js

import { PRIMARY_COLOR } from '../../_constants/common'
import RDoughnutChart from '../chart/RDoughnutChart'
import './boxChart.scss'
import { VerticalBarChart } from '../chart/VerticalBarChart'
import { useEffect, useState } from 'react'
import InputDate from '../Auth/InputDate'
import { renderIconButton, renderIconButtonLeft, renderIconDate } from '../renderIcon'

const Btn = ({ icon, isDisabled = false, onClick }) => {
  return (
    <div className='d-flex justify-content-center align-items-center'>
      <button className={`d-flex custom-button ${isDisabled ? "button-disable" : ""}`} onClick={onClick} disabled={isDisabled}>
        <div>{icon}</div>
      </button>
    </div>
  );
};

export default function BoxDoughnutBarChart({
  dataDoughnut = [], 
  dataBarChart = [], 
  labelsBarChart = [], 
  dateBarChat,
  onSetDateBarChart,
  titleDoughnut,
  subtitleDoughnut,
  titleLine,
  subTitleLine,
}) {
  const [month, setMonth] = useState(dateBarChat)
  const [monthError, setMonthError] = useState('')
  const [current, target] = dataDoughnut

  const handleMonthChange = (date) => {
    setMonth(date)
  }

  const renderDoughnutSection = () => (
    <div style={{borderBottom: '1px solid #c4c4c4', paddingBottom: '1.6rem', flex: 0.38, display: 'flex', flexDirection: 'column'}}>
      {titleDoughnut && <p className='box-chart-title'>{titleDoughnut}</p>}
      {subtitleDoughnut && <p className='box-chart-subtitle'>{subtitleDoughnut}</p>}
      <div className='d-flex flex-1'>
        <div className='doughnut-chart-content flex-1'>
          <RDoughnutChart data={dataDoughnut} />
        </div>
        <div className='origin-vertical justify-content-center align-item-center flex-1'>
          <p style={{color: PRIMARY_COLOR, fontSize: '2.2rem', fontWeight: 800}}>{current}</p>
          <p style={{color: '#01AEF0', fontSize: '2.2rem', fontWeight: 800}}>
            {target > 0 ? target : '...'}
          </p>
        </div>
      </div>
    </div>
  )
  
  const renderBarSection = () => (
    <div className='d-flex' style={{marginTop: '1.2rem', flexDirection: 'column', flex: 0.62}}>
      {titleLine && <p className='box-chart-title'>{titleLine}</p>}
      {subTitleLine && <p className='box-chart-subtitle'>{subTitleLine}</p>}
      {dataBarChart.length > 0 ? (
        <div className='chart-container'>
          <div className='flex-1' style={{ padding: '1.6rem 0', height: '100%', width: '360px' }}>
            <VerticalBarChart data={dataBarChart} labels={labelsBarChart} />
          </div>
        </div>
      ) : (
        <div className="d-flex justify-content-center align-items-center flex-1">
          Không có dữ liệu để hiển thị
        </div>
      )}
    </div>
  )
  const handleClickNext = () => {
    const newMonth = month.getMonth() + 1;
    const newYear = month.getFullYear();
  
    if (newMonth > 11) {
      setMonth(new Date(newYear + 1, 0, 1));
    } else {
      setMonth(new Date(newYear, newMonth, 1));
    }
  };
  
  const handleClickPrev = () => {
    const newMonth = month.getMonth() - 1;
    const newYear = month.getFullYear();
    
    if (newMonth < 0) {
      setMonth(new Date(newYear - 1, 11, 1)); 
    } else {
      setMonth(new Date(newYear, newMonth, 1));
    }
  };

  useEffect(() => {
    onSetDateBarChart?.(month);
  }, [month]);

  const isDisabledNext = new Date(month).getMonth() === new Date().getMonth() && new Date(month).getFullYear() === new Date().getFullYear();
  

  return (
    <div className="box-chart-container">
      {renderDoughnutSection()}
      {renderBarSection()}
      <div className='d-flex justify-content-center align-items-center' style={{marginTop:'1.2rem'}}>
        <Btn icon={renderIconButtonLeft()} isDisabled={false} onClick={handleClickPrev} />
        <div className='d-flex justify-content-center align-item-center' style={{width: 140, alignSelf: 'center'}}>
          <InputDate
            maxDate={new Date()}
            label={''}
            styleContainer={{flex: 1}}
            value={month}
            setValue={handleMonthChange}
            name="month"
            renderLabelIcon={renderIconDate}
            errorText={monthError}
            errorAbsolute={true}
            popperPlacement='top'
            typeErrText='underAbsolute'
            isMonthPicker
          />
        </div>
        <Btn icon={renderIconButton()} isDisabled={isDisabledNext} onClick={handleClickNext} />
      </div>
    </div>
  )
}