import React from 'react'
import { type BarDatum, ResponsiveBar } from '@nivo/bar'
import { useTranslation } from 'react-i18next'
import { useColorMode } from '@chakra-ui/react'

export const Bar = ({ data }: { data: BarDatum[] }) => {
    const { t } = useTranslation()
    const { colorMode } = useColorMode()
    
    // Находим максимальное значение для нормализации цветов
    const maxValue = Math.max(...data.map(item => (item.count as number)))
    
    return (
        <ResponsiveBar
            data={data}
            keys={['count']}
            indexBy="lessonIndex"
            margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
            padding={0.4}
            valueScale={{ type: 'linear' }}
            indexScale={{ type: 'band', round: true }}
            colors={(bar) => {
                // Нормализованное значение от 0 до 1
                const normalized = (bar.data.count as number) / maxValue
                // Красный при низких значениях, зеленый при высоких
                const r = Math.round(255 * (1 - normalized))
                const g = Math.round(255 * normalized)
                const b = 100 // Немного синего, чтобы цвета не были слишком резкими
                return `rgb(${r}, ${g}, ${b})`
            }}
            theme={{
                tooltip: {
                    container: {
                        background: colorMode === 'dark' ? '#2D3748' : '#ffffff',
                        color: colorMode === 'dark' ? '#ffffff' : '#333333',
                        fontSize: 14,
                        borderRadius: 8,
                        boxShadow: '0 4px 10px rgba(0, 0, 0, 0.1)',
                    },
                },
                grid: {
                    line: {
                        stroke: colorMode === 'dark' ? '#4A5568' : '#e0e0e0',
                        strokeWidth: 1,
                    },
                },
            }}
            borderRadius={4}
            borderWidth={1}
            borderColor={{ from: 'color', modifiers: [['darker', 0.3]] }}
            axisTop={null}
            axisRight={null}
            labelSkipWidth={12}
            labelSkipHeight={12}
            labelTextColor={colorMode === 'dark' ? '#ffffff' : '#333333'}
            animate={true}
            motionConfig="gentle"
            enableGridY={false}
            role="application"
            ariaLabel={t('journal.pl.lesson.attendanceChart')}
            barAriaLabel={(e) =>
                e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue
            }
        />
    )
}
