import React, { useState, useEffect } from 'react'
import { Card, CardContent, Grid, Typography, TextField, CircularProgress } from '@mui/material'

interface SignLanguageData {
  id: number
  sign: string
}

const SignLanguageDictionary: React.FC = () => {
  const [signs, setSigns] = useState<SignLanguageData[]>([])
  const [searchTerm, setSearchTerm] = useState<string>('')
  const [loading, setLoading] = useState<boolean>(true)

  useEffect(() => {
    // Simulating API call with dummy data
    setTimeout(() => {
      const dummyData: SignLanguageData[] = [
        { id: 1, sign: 'A' },
        { id: 2, sign: 'B' },
        { id: 3, sign: 'AA' },
        { id: 4, sign: 'AB' },
        { id: 5, sign: 'BA' },
        // Add more dummy data as needed
      ]
      setSigns(dummyData)
      setLoading(false)
    }, 1500) // Simulating a delay for loading effect
  }, [])

  const filteredSigns = signs.filter((sign) =>
    sign.sign.toLowerCase().includes(searchTerm.toLowerCase()),
  )
  const sortedSigns = [...filteredSigns].sort((a, b) => a.sign.localeCompare(b.sign))

  // Use a Set to keep track of unique sign IDs
  const uniqueSignIds = new Set<number>()
  const uniqueSortedSigns = sortedSigns.filter((sign) => {
    if (uniqueSignIds.has(sign.id)) {
      return false // Skip if the ID has already been added
    }
    uniqueSignIds.add(sign.id) // Add the ID to the Set
    return true // Include this sign in the result
  })

  return (
    <div
      style={{ padding: '20px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}
    >
      <Typography
        variant='h6'
        component='div'
        fontWeight={600}
        fontSize={35}
        mt={2}
        mb={4}
        letterSpacing={0.5}
        sx={{ color: '#555555' }}
      >
        Dictionary
      </Typography>
      <TextField
        label='Search'
        variant='outlined'
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        fullWidth
        style={{ marginBottom: '20px', width: '100%' }}
      />
      {loading ? (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh',
            width: '100%',
          }}
        >
          <CircularProgress />
        </div>
      ) : (
        <Grid container spacing={2}>
          {uniqueSortedSigns.map((sign, index) => (
            <Grid item xs={12} sm={6} md={4} key={sign.id}>
              <Card
                style={{
                  borderRight: (index + 1) % 4 === 0 ? '2px solid #ccc' : 'none',
                  marginBottom: '10px',
                }}
              >
                <CardContent>
                  <Typography variant='h5' align='center'>
                    {sign.sign}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      )}
    </div>
  )
}

export default SignLanguageDictionary
