import React from 'react';
import { Box, IconButton, Tooltip } from '@mui/material';
import {
  ZoomIn,
  ZoomOut,
  ChevronLeft,
  ChevronRight,
  RestartAlt,
} from '@mui/icons-material';

interface ChartNavigationToolbarProps {
  visible: boolean;
  onZoomIn: () => void;
  onZoomOut: () => void;
  onScrollLeft: () => void;
  onScrollRight: () => void;
  onReset: () => void;
}

const ChartNavigationToolbar: React.FC<ChartNavigationToolbarProps> = ({
  visible,
  onZoomIn,
  onZoomOut,
  onScrollLeft,
  onScrollRight,
  onReset,
}) => {
  if (!visible) return null;

  return (
    <Box
      sx={{
        position: 'absolute',
        bottom: 8,
        left: '50%',
        transform: 'translateX(-50%)',
        zIndex: 100,
        bgcolor: 'background.paper',
        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
        borderRadius: 1,
        border: '1px solid',
        borderColor: 'divider',
        display: 'flex',
        alignItems: 'center',
        gap: 0.5,
        px: 0.5,
        py: 0.5,
      }}
    >
      {/* 작게보기 (Zoom Out) */}
      <Tooltip title="작게보기">
        <IconButton
          size="small"
          onClick={onZoomOut}
          sx={{
            width: 32,
            height: 32,
            '&:hover': {
              bgcolor: 'action.hover',
            },
          }}
        >
          <ZoomOut sx={{ fontSize: 20 }} />
        </IconButton>
      </Tooltip>

      {/* 크게보기 (Zoom In) */}
      <Tooltip title="크게보기">
        <IconButton
          size="small"
          onClick={onZoomIn}
          sx={{
            width: 32,
            height: 32,
            '&:hover': {
              bgcolor: 'action.hover',
            },
          }}
        >
          <ZoomIn sx={{ fontSize: 20 }} />
        </IconButton>
      </Tooltip>

      {/* 좌로 스크롤 (차트를 우측으로 이동 - 과거 데이터) */}
      <Tooltip title="좌로 스크롤">
        <IconButton
          size="small"
          onClick={onScrollLeft}
          sx={{
            width: 32,
            height: 32,
            '&:hover': {
              bgcolor: 'action.hover',
            },
          }}
        >
          <ChevronLeft sx={{ fontSize: 20 }} />
        </IconButton>
      </Tooltip>

      {/* 우로 스크롤 (차트를 좌측으로 이동 - 최신 데이터) */}
      <Tooltip title="우로 스크롤">
        <IconButton
          size="small"
          onClick={onScrollRight}
          sx={{
            width: 32,
            height: 32,
            '&:hover': {
              bgcolor: 'action.hover',
            },
          }}
        >
          <ChevronRight sx={{ fontSize: 20 }} />
        </IconButton>
      </Tooltip>

      {/* 차트 재설정 */}
      <Tooltip title="차트 재설정">
        <IconButton
          size="small"
          onClick={onReset}
          sx={{
            width: 32,
            height: 32,
            '&:hover': {
              bgcolor: 'action.hover',
            },
          }}
        >
          <RestartAlt sx={{ fontSize: 20 }} />
        </IconButton>
      </Tooltip>
    </Box>
  );
};

export default ChartNavigationToolbar;
