import { PanResponder, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Svg,{Path} from 'react-native-svg';
import { useMemo, useState } from 'react';
import { C } from '../src/theme';
export default function SignaturePad({onChange}:{onChange:(svg:string)=>void}){const [paths,setPaths]=useState<string[]>([]);const [active,setActive]=useState('');const responder=useMemo(()=>PanResponder.create({onStartShouldSetPanResponder:()=>true,onMoveShouldSetPanResponder:()=>true,onPanResponderGrant:e=>{const {locationX:x,locationY:y}=e.nativeEvent;setActive(`M ${x} ${y}`);},onPanResponderMove:e=>{const {locationX:x,locationY:y}=e.nativeEvent;setActive(p=>`${p} L ${x} ${y}`);},onPanResponderRelease:()=>setPaths(p=>{const next=[...p,active];onChange(`<svg xmlns="http://www.w3.org/2000/svg" width="600" height="220"><rect width="100%" height="100%" fill="white"/>${next.map(d=>`<path d="${d}" fill="none" stroke="#12304A" stroke-width="3" stroke-linecap="round"/>`).join('')}</svg>`);setActive('');return next;})}),[active,onChange]);return <View><View style={s.pad} {...responder.panHandlers}><Svg width="100%" height="100%">{paths.map((d,i)=><Path key={i} d={d} stroke={C.navy} strokeWidth={3} fill="none" strokeLinecap="round"/>)}{active?<Path d={active} stroke={C.navy} strokeWidth={3} fill="none" strokeLinecap="round"/>:null}</Svg><Text style={s.help}>Customer signature</Text></View><TouchableOpacity onPress={()=>{setPaths([]);setActive('');onChange('');}}><Text style={s.clear}>Clear signature</Text></TouchableOpacity></View>};const s=StyleSheet.create({pad:{height:170,borderWidth:1,borderColor:C.line,borderRadius:10,backgroundColor:'#fff',overflow:'hidden'},help:{position:'absolute',right:10,bottom:7,color:C.muted,fontSize:11},clear:{color:C.blue,fontWeight:'700',paddingVertical:8,textAlign:'right'}});