import { Select, Typography, Descriptions, Collapse, Flex } from 'antd'
import { CaretLeftOutlined } from '@ant-design/icons'
import { useThemeContext } from '../context/ThemeContext'
import useCollapseState from '../hooks/useCollapseState'

const { Title } = Typography
const { Option } = Select

const Settings = () => {
  const {
    isDarkMode,
    toggleTheme,
    isCompact,
    toggleCompact,
    isSystem,
    toggleSystem
  } = useThemeContext()
  const [collapseState, updateCollapseState] = useCollapseState('Settings', {
    appearance: true
  })

  const handleThemeChange = (value) => {
    if (value === 'system') {
      toggleSystem()
    } else {
      if (isSystem) {
        toggleSystem()
      }
      if (value === 'dark' && !isDarkMode) {
        toggleTheme()
      } else if (value === 'light' && isDarkMode) {
        toggleTheme()
      }
    }
  }

  const handleCompactChange = (value) => {
    if (value === 'compact' && !isCompact) {
      toggleCompact()
    } else if (value === 'comfortable' && isCompact) {
      toggleCompact()
    }
  }

  const getCurrentThemeValue = () => {
    if (isSystem) return 'system'
    return isDarkMode ? 'dark' : 'light'
  }

  return (
    <div style={{ height: '100%', minHeight: 0, overflowY: 'auto' }}>
      <Flex vertical gap={'large'}>
        <Collapse
          ghost
          expandIconPosition='end'
          activeKey={collapseState.appearance ? ['1'] : []}
          onChange={(keys) =>
            updateCollapseState('appearance', keys.length > 0)
          }
          expandIcon={({ isActive }) => (
            <CaretLeftOutlined
              rotate={isActive ? 90 : 0}
              style={{ paddingTop: '9px' }}
            />
          )}
          className='no-h-padding-collapse'
        >
          <Collapse.Panel
            header={
              <Flex
                align='center'
                justify='space-between'
                style={{ width: '100%' }}
              >
                <Title level={5} style={{ margin: 0 }}>
                  Appearance Settings
                </Title>
              </Flex>
            }
            key='1'
          >
            <Descriptions
              bordered
              column={{
                xs: 1,
                sm: 1,
                md: 1,
                lg: 2,
                xl: 2,
                xxl: 2
              }}
            >
              <Descriptions.Item label='Theme'>
                <Select
                  value={getCurrentThemeValue()}
                  onChange={handleThemeChange}
                  style={{ width: '100%' }}
                >
                  <Option value='light'>Light</Option>
                  <Option value='dark'>Dark</Option>
                  <Option value='system'>System</Option>
                </Select>
              </Descriptions.Item>
              <Descriptions.Item label='UI Density'>
                <Select
                  value={isCompact ? 'compact' : 'comfortable'}
                  onChange={handleCompactChange}
                  style={{ width: '100%' }}
                >
                  <Option value='comfortable'>Comfortable</Option>
                  <Option value='compact'>Compact</Option>
                </Select>
              </Descriptions.Item>
            </Descriptions>
          </Collapse.Panel>
        </Collapse>
      </Flex>
    </div>
  )
}

export default Settings
