import React, { useState } from 'react'

// ** MUI Imports
import Grid from '@mui/material/Grid'
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Tabs from '@mui/material/Tabs'
import Tab from '@mui/material/Tab'
import Box from '@mui/material/Box'

// ** Components


// ** Types
import SavingViaTimeBased from './components/SavingViaTimeBased'
import SavingViaEventBased from './components/SavingViaEventBased'
import SavingViaGold from './components/SavingViaGold'
import SavingViaCrypto from './components/SavingViaCrypto'
import { TabPanelProps } from './types'

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props

  return (
    <div
      role='tabpanel'
      hidden={value !== index}
      id={`saving-tabpanel-${index}`}
      aria-labelledby={`saving-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ py: 3 }}>{children}</Box>}
    </div>
  )
}

const SavingSettings = () => {
  const [activeTab, setActiveTab] = useState<number>(0)

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setActiveTab(newValue)
  }

  return (
    <Grid container spacing={6}>
      <Grid item xs={12}>
        <Card>
          <CardHeader
            title='Saving Settings'
            subheader='Configure your saving preferences'
          />
          <CardContent>
            <Tabs
              value={activeTab}
              onChange={handleTabChange}
              variant='scrollable'
              scrollButtons='auto'
              sx={{ borderBottom: 1, borderColor: 'divider' }}
            >
              <Tab label='Saving Via Time Based' />
              <Tab label='Saving Via Event Based' />
              <Tab label='Saving Via Gold' />
              <Tab label='Saving Via Crypto' />
            </Tabs>

            <TabPanel value={activeTab} index={0}>
              <SavingViaTimeBased />
            </TabPanel>

            <TabPanel value={activeTab} index={1}>
              <SavingViaEventBased />
            </TabPanel>

            <TabPanel value={activeTab} index={2}>
              <SavingViaGold />
            </TabPanel>

            <TabPanel value={activeTab} index={3}>
              <SavingViaCrypto />
            </TabPanel>
          </CardContent>
        </Card>
      </Grid>
    </Grid>
  )
}

SavingSettings.acl = {
  action: 'read',
  subject: 'user-management'
}


export default SavingSettings