Untitled

import React, {useState, useEffect} from 'react'
import {useClient} from 'sanity'
import {Card, Button, Box, Flex, Autocomplete, Text} from '@sanity/ui'
import {SearchIcon} from '@sanity/icons'
import {set} from 'sanity'
import {useFormValue} from 'sanity'

const UnitTypeReferenceInput = ({type, value, onChange, props}) => {
  const client = useClient()
  const [selectedUnit, setSelectedUnit] = useState(null)
  const [unitTypeOptions, setUnitTypeOptions] = useState([])
  const docId = String(useFormValue(['_id']))

  // Fetch unitType documents when the component is mounted
  useEffect(() => {
    const fetchUnitTypes = async () => {
      const unitTypes = await client.fetch(`*[_type == "unit" && !(_id in path('drafts.**'))]`)
      setUnitTypeOptions(unitTypes)
    }

    fetchUnitTypes()
  }, [client])

  const handleReferenceSelect = (selectedUnitTypeId) => {
    console.log('-- handleReferenceSelect, selectedUnitTypeId: ', selectedUnitTypeId)
    setSelectedUnit(selectedUnitTypeId)
  }

  const populateFields = async () => {
    if (selectedUnit) {
      const unitType = await client.fetch(`*[_id == "${selectedUnit}"][0]`)

      if (unitType?.unit) {
        // 1. Set the current field (unitTypeReference) with the _ref
        onChange(
          set({
            _ref: selectedUnit,
          })
        )

        // 2. Set the value of the 'unit' field in the same document to the value of unitType.unit.
        // Mind that the 'unit' field doesn't belong to the unitTypeReference field, but to the document. They're siblings.
        if (docId) {
          const doc = await client.fetch(`*[_id == "${docId}"][0]`)

          const setValues = {
            unit: unitType.unit,
          }

          if (
            (!doc.images || doc.images.length === 0) &&
            unitType.images &&
            unitType.images.length > 0
          ) {
            setValues.images = unitType.images
          }

          if (!doc.floorplanImage && unitType.floorplanImage) {
            setValues.floorplanImage = unitType.floorplanImage
          }

          if (
            (!doc.hotspots || doc.hotspots.length === 0) &&
            unitType.hotspots &&
            unitType.hotspots.length > 0
          ) {
            setValues.hotspots = unitType.hotspots
          }

          await client
            .patch(docId)
            .set({
              ...setValues,
            })
            .commit()
        }
      }
    }
  }

  return (
    <Box>
      <Flex direction={['column', 'row']} gap={2}>
        <Box flex={1}>
          <Autocomplete
            placeholder="Search for unit type..."
            icon={SearchIcon}
            options={unitTypeOptions.map((unit) => ({value: unit._id, payload: unit}))}
            renderValue={(value, option) => option?.payload.title || value}
            renderOption={(option) => (
              <Card as="button">
                <Flex align="center">
                  <Box flex={1} padding={3}>
                    <Text size={[2, 2, 3]}>{option.payload.title}</Text>
                  </Box>
                </Flex>
              </Card>
            )}
            filterOption={(query, option) =>
              option.payload?.title?.toLowerCase().includes(query.toLowerCase())
            }
            onSelect={(item) => handleReferenceSelect(item)}
          />
        </Box>
        <Box>
          <Button
            text="Populate"
            tone="positive"
            onClick={populateFields}
            disabled={!selectedUnit}
          />
        </Box>
      </Flex>
    </Box>
  )
}

export default UnitTypeReferenceInput